One of the buzzed words amongst designers and developers these days is SASS. SASS (Syntactically Awesome Style Sheets) is scripting language that helps in simplifying CSS codes, eventually making it more interactive style sheet language.
Few reasons that has made SASS designer’s dearest, include-
Few HTTP requests
In CSS, separate CSS files are used based on the content. Problem with this approach was that it included HTTP requests on website for each file being created that eventually reduced the loading time speed of website. However, with the introduction of SASS, style sheets are broken into multiple files and then compiled into one file style.scss.
Responsive design for all devices
With breaking of style sheets in SASS, it has become easy to display website on different devices like desktop, tablets, smartphones, which was a drawback in CSS.
Improved workflow
There is an improved workflow with SASS as compared to traditional CSS. In CSS, code must be written many times throughout the project to color the background, while in Sass simply declaring a variable once is enough. Hence, Sass is truly a time savor!
Preprocessing
With the need to maintain large files, CSS alone cannot do any wonders. This is where SASS comes into picture. Sass provides feature that efficiently helps in handling complex and large style sheets.
Partials
Partials make things easier to maintain. These are used at times when snippets of CSS are to be included in SASS files and should not be generated in CSS file. Partial symbol is determined with underscore.
For example-
_partial.scss
NOTE-While execution of file, SASS comes to know the file is partial file.
Import
Import feature of Sass helps import one file into another resulting in creating a single CSS file to run on the web browser.
For example-
_reset.scss and _base.scss are two Sass files.
//_reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
//_base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
When importing _reset.scss in the _base.scss, output that generates comes out to be-
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
NOTE- ‘html, body, ul’ of _reset.scss file is included in one single file named _base.scss.
Inheritance/Extend
The use of inheritance in SASS helps avoid writing of many class names again and again, which is an advantage over CSS because it helps reduce the codes.
