What the heck is sass?

So we all have heard this new word sass but often we get confused whether it is sass or saas?

First sass stands for syntactically awesome stylesheet and second saas stands for software as a service. So we are clear now that we are going to talk about sass here not saas. So what is this new term that is floating around in the air like a phenomenon. Well in easy words, sass is an extension of css which allows us to write css in object oriented way. In other words, we can use variables, nested rules, mixins, inline imports, inheritance and more.

So why do we use sass?

There are many features of sass and benefits of using them. In this blog I will explain each feature and what is the appropriate situation to use them.

Variables

So you have a client but he is not sure about the design and asks you to create some nice design for him. You go ahead and write thousand lines of code including font that is used throughout the site. Now imagine your client comes back and says he doesn’t like fonts and change it to different fonts. Now you can see how frustrating this can be to change fonts throughout the site and that is where sass comes in. You can simply declare variable and store the font name in that variable and use variable throughout the site. So next time if client want to change font, all you have to do is change variable value.

Nesting

Have you found yourself using same elements as a css selector again and again? I bet you did. Well, sass allows us to write nested css which is easy to understand and maintain in compare to grouping

Partials

Partials allow us to modularise your css and keep things easier to maintain. In other words, you can write different css files for different part of website and inject it into one .scss file.

Import

Import directive is used to inject partial .scss file in one base .scss file.

Mixins

Mixins are very powerful way to write css. Its is similar like functions where you can pass in variables as parameters so that we can give dynamic look to our website.

There are two main reasons to use mixins.

One is that mixins simplify your css especially where we use css3 properties like border-radius where we have to declare different prefix for different browsers.

In addition, mixins can provide dynamic look to your website. For example, Gmail allows user to change theme color as per their choice. This way we can show different color themes to our clients for same website. Isn’t it powerful?

Extend/Inheritance

This is exactly what you think. We can declare some css and then extend that for children classes. This provides more readable format than grouping css.

Operators

Using sass we can implement mathematical operations by passing in the variables. So we don’t have to do the calculation and write accurate number in pixel. We can implement the logic and sass will take care of it.

Once .scss file is written, you can use libraries such as compass to convert your .scss file into .css file which can be used to style your website.

In conclusion, sass is just css extension which allows us to write css object oriented way which css3 won’t be able to offer in nearest future.

Looking for timeline and cost estimates for your app?

Contact us

Vaibhav S.

CEO

Vaibhav Shah leads Techuz as its CEO, dedicated to catering to the needs of both startup and enterprise clients with custom web and mobile application solutions. Techuz specializes in crafting scalable web applications and mobile apps, leveraging technologies such as Angular, React.js, Node.js, PHP, React Native and Flutter