What are the Advantages of SASS, over Traditional CSS?

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.

What are the Advantages of SASS, over Traditional CSS

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.

Have a project in mind?

Tell us about it. We'll reach out to discuss your needs.

Get In Touch