CSS vs SASS
Luis N. Cervantes
Full Stack Developer | Software Developer | Scrum Master | Business Intelligence (BI)
Introduction:
The styling of HTML pages helps in providing an appealing look and feel to the HTML pages which significantly helps in improving the user experience in the HTML. The are multiple ways to style the HTML page. The conventional styling format is CSS and the later styling format includes SASS. The SASS multiple added features that incorporate basic features of CSS.
CSS:
The CSS stands for cascading style sheet is a scripting language used for designing web pages which are widely used along with HTML and Javascript with extension .css. The features of CSS include below.
- The script used for CSS is very sophisticated and works close in integration with
- HTML.
- The CSS has declarative and selective blocks where each declaration ends with a semi-colon.
- Reusability of the variables as CSS type is not allowed in which demands rewriting the styling codes multiple times. From a share-ability point of view, one property can be ascertained in a block of code.
- The concept of nested CSS codes would lead to the breakage of CSS selectors leading to multiple conflicts and undesirable designing.
Usage in terms of CSS class and id:
.someclass{
color: black;
font-size:20px
}
__________________
#someuniqueid{
background-color: white;
color: black;
SASS:
The SASS stands for syntactically awesome style sheet and is an advanced styling scripting language that is built over CSS with extension SASS or SCSS. The sass helps in overcoming the drawbacks of CSS making it more reusable, readable, and stable enhances the productivity of the web developer to implement the design. All the modern UI technologies use SASS scripting to develop the website. The salient features of SASS are below.
- The scripting of sass is more oriented and comprehensive, and the language is inspired by SaaS Script.
- SaaS has no use of blocks instead it used indentation and newlines instead of a semi-colon. The nesting of code is easily supported with a hierarchical structure.
- It allows the use of variables that can significantly reduce the coding and improve the speed and reusability in developing the web pages, it also allows the use of CSS properties across the code.
- The SaaS is a preprocessing language that in turn compiles into CSS.
Usage:
$fnt-stk: Arial
$prim-clr: #111
body
font: 80% $fnt-stk
color: $prim-clr