Sass (syntactically awesome style sheets) is a preprocessor scripting language. It is compiled into CSS and is stored with the .sass extension. Sass consists of two syntaxes, the original based on indentations that uses the .sass extension and the newer SCSS with block formatting like CSS that uses the .scss extension.
Why use Sass
Sass is really helpful in maintaining styles as it provides many features like introduces variables, nesting, mixins, imports, and selector inheritance that make working with styles fun.
How to use SASS files
SASS files are not included directly in the HTML document but are rather converted to CSS files that are included in HTML files. You may istall Sass of your system by following the instructions given on the Official Sass Site.
Sass may be converted to CSS by either converting an already saved SASS file or by watching for changes and converting as the file is saved. The commands for both are given below.
The first parameter of the command is the source SASS file and the second parameter is the output CSS file.
sass main.sass main.css
Watch for Changes
The above command can be run with an additional watch flag that keeps the command running and as soon as the Sass file is saved, output CSS is generated.
sass --watch main.sass main.css
Sass supports variables, nesting, mixins, imports, selector inheritance, etc. Given below are examples of these features.
Variables can be used to set reusable information such as primary color or padding for a button. This can prove useful if in the future you needed to change that information, you just change it at one location and it updates everywhere.
Extend/Inheritance can prove to be useful in cases where the properties of one selector need to be shared with another selector. In the example below, the .error-notice selector takes all the properties of the .error-text selector and adds border and padding properties.
Importing can be useful if you structure your styles into different files based on functionality or any other structure that you follow. You may import all these files in a primary SASS file that is later converted to CSS. While importing, you do not need to specify the file extension in the import instruction. Sass compiles all SASS files directly. To avoid import files to be compiled directly, you can make them partials by adding underscore(_) at the start of their name. Partials are imported similar to normal Sass files.