Course Banner


What is SASS?

SASS, which stands for Syntactically Awesome Style Sheets is an enhanced version of CSS with programming concept. It contains all the

Features of its predecessor CSS and also has added new features which makes the designers work a lot easy. The most important feature of

SASS dynamically generates CSS generation.

SASS has some amazing features like variables, nested rules, mixin, and inline imports, built-in functions to manipulate colour and other values and these are completely compatible with the CSS.

Why use SASS?

CSS was a game-changer in the field of design when it was first accepted by w3C in 1996. With CSS, the designers could place the elements where one wants. Also gone are the days when the designer would have to slice images to fit into the bulky tables.

And then came CSS3 the new version of CSS which is also a great tool for designers. CSS3 brought the concept of a responsive website design.

CSS3 came at the right time when the smartphone came into being. With CSS3 one does not need to create two versions of websites one for mobile and one for website. With CSS3 media query same website could adjust into big screen as well as small screen.

CSS3 was also very helpful in maintaining the fonts. The designers would have to rely on images for fancy fonts. But after CSS3 it was possible to use any font one wants without using images.

So where does SASS stand for?

Even a simple website needs repetitive CSS task. SASS aims to provide a mechanism where one can do more work in less time. Also, page speed and load time are one of the important factors for todays day. Particularly after the arrival of smartphones. SASS also minimizes page loading speed which is very good for SEO (Search Engine Optimization).

How Sass Works?

One thing you should understand that browser does not understand SASS code directly. Browser is not compatible with SASS code. Then what is the use of using SASS? Ultimately one writes CSS code for browsers. The answer is we write SASS code and the Sass pre-processor translates the Sass code into standard CSS. And this transformation of CSS is called transpiling. It should be noted that Transpiration is different form compilation. In case of compilation, the code is translated from human language to machine language. But in case of tranpilation the human readable SASS code is traspiled into human and browsers readable CSS code.

If you come from JavaScript framework background like Angular, Reactjs, you may be familiar that Babel () or Typescript is used to translates ES2015 into JavaScript that is compatible with current browsers.

Basically CSS has never been part of the programing language. CSS has been used for design purpose and it does not contain any programing concept.

But with the arrival of SASS, you will see, you can use loop, if else etc. in SASS code.

Ad Image