What is SASS and Why should you use over CSS?

Systematically Awesome Style Sheets in short SASS is a CSS pre-processor. It works as an extension of CSS that enables you to use things like variables, nested rules, mixins, inline imports, inheritance and more, which make CSS code more efficiently.

So, what is CSS pre-processor?

Preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, Less and Stylus.

Sass is more stable and powerful CSS extension language out there that describes style of document cleanly and structurally. Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. After the initial development, Natalie Weizenbaum and Chris Eppstein continue with its initial version and extend Sass with SassScript, a simple scripting language used in Sass files. The official implementation of Sass is open-source and coded in Ruby.

Sass is a scripting language that is interpreted or compiled into CSS. It is very useful to handle large style sheets by keeping them well organized and running quickly small style sheets. To start coding using Sass you must have install Ruby in you system and also need to follow the Sass community guidelines.

In case of syntax, Sass have two different kinds of options -

• SCSS or Sassy CSS uses the .scss file extension and is fully compliant with CSS syntax.

• Indented uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write.

Why should you use it?

When you coding in CSS, you may have noticed that you had to copy blocks of code over to multiple other elements in order for them to have the same custom styles, need to use Find-and-Replace to make edits to colors or fonts in your stylesheet. These are all common predicaments that bother every serious developer.

Notable features of Sass

• Sass is fully CSS compatible.
• It is more stable, powerful and elegant than CSS.
• It has its own syntax and compiles to readable CSS.
• It is based on JavaScript and is a superset of CSS.
• It supports language extensions such as variables, nesting, and mixins.
• It is an open-source pre-processor that is interpreted into CSS.
• It provides many useful functions for manipulating colors and other values.
• It has a large community and is well documented.
• You can divide and conquer.
• It uses nested syntax.
• It includes mixins.
• Fewer HTTP requests by using the @import attribute.
• It keeps your responsive design project more organized.
• It provides many advanced features like control directives for librarie
• It provides well-formatted, customizable output.

A few repeated lines of CSS may not seem like that big of a deal for our small project but when you're in charge of managing thousands of code in the real world, whether for a small startup or a big corporation, things can get pretty messy. CSS preprocessors like Sass help us alleviate that risk, and are thus a common requirement in many of today’s job postings.