SCSS is the second syntax of Sass (Syntactically Awesome Stylesheet) that uses brackets instead of indentations. SCSS was designed in such a way that a valid CSS3 file is also a valid SCSS file. SCSS files are stored with the .scss extension.
Why use SCSS
As the designs of websites are becoming complex resulting in large CSS files. Such files are harder to maintain. This is where SCSS comes in. SCSS introduces variables, nesting, mixins, imports, and selector inheritance in CSS development. These additions make working with design a lot more fun.
How to use SCSS files
SCSS files are not included directly in the HTML document like CSS. Instead, SCSS files are converted to CSS files that are included in HTML files. To install SCSS on your system, follow the instructions given on the Official Sass Site.
To convert SCSS to CSS, you may either convert an already saved SCSS file or watch for changes and convert as the file is saved. The commands for both are given below.
The first parameter is the source SCSS file and the second parameter is the output CSS file.
sass main.scss main.css
Watch for Changes
The command has an additional watch* flag that keeps the command running and as soon as the SCSS file is saved, output CSS is generated.
sass --watch main.scss main.css
SCSS supports variables, nesting, mixins, imports, selector inheritance, etc. Given below are examples of these features.
By the use of variables, you can set reusable information such as primary color or background color for the save button. This is useful if you need to change that information, you just change it at one location and it updates where ever it is used.
Extend/Inheritance is 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 .error-text selector and adds border and padding properties.
Importing can be useful in the separation of concerns. You may divide the styles in such a way that the header styles are in a separate file, the footer styles are in a separate file, all the color variables used in the styles can be in a separate file, etc. Using this technique, the styles stay organized. You just import the files in your main SCSS file as shown in the example below. You do not need to specify the file extension in the import instruction. Sass compiles all SCSS files directly. To avoid import files to be compiled directly, you can make them partials by adding underscore(_) before their name. You can import partials similar to normal SCSS files without the underscore.