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.
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.
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
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 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 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.
The developer must have enough time to learn new features present in this preprocessor before using it.
Using Sass may cause losing benefits of browser’s built-in element inspector.