What is Sass CSS? Advantages & disadvantages of using Sass CSS.

What is sass?

Sass is a CSS preprocessor-a layer between the stylesheets you author and the .css files you serve to the browser. Sass (short for Syntactically Awesome Stylesheets) plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to maintain.

• Sass stands for Systematically Awesome Stylesheets
• Sass is a preprocessor / CSS extension
• Sass allows us to use variables, nested rules, and import to CSS
• SASS is an extension of CSS. It is also known as CSS pre-processor.

Sass Continued

• when we write in SASS, browsers will not understand our code
• It needs to be translated into CSS
• Sass is written in ruby

Syntax
Sass includes two syntax options:

1. SCSS (Sassy CSS): using the .scss file extension and is fully adjective with CSS syntax
2. Indented (simply called ‘Sass’): using .sass file extension and indentation rather than
brackets; it is not fully adjective with CSS syntax, but it’s quicker to write

Note: Those files can be converted from one syntax to the other using the sass-convert command.

Variables

Sass Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. if you wanted to set the same height for two different selectors, you could create a variable called $control-height

$control-height:40px;

Features of Sass

• Sass is fully CSS-compatible.
• It is more stable, powerful and elegant than CSS.
• It is based on JavaScript and is a superset of CSS.
• It has its own syntax and compiles to readable CSS.
• It is an open-source preprocessor that is interpreted into CSS.
• It supports language extensions such as variables, nesting, and mixins.
• It provides many useful functions for manipulating colors and other values.
• It provides many advanced features like control directives for libraries.
• It provides well-formatted, customizable output.

Sass Advantages

• Sass facilitates you to write clean, easy and less CSS in a programming construct.
• It contains fewer codes so you can write CSS quicker.
• It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
• It is compatible with all versions of CSS. So, you can use any available CSS libraries.
• It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.

Sass disadvantages

• The developer must have enough time to learn new features present in this preprocessor before using it.
• Using Sass may cause losing benefits of the browser’s built-in element inspector.
• Code has to be compiled
• Difficult Troubleshooting