SASS – Lesson 2 : Divide and conquer, refactoring

In CSS, dividing style sheets is a practice that is discouraged because it decreases site performance by multiplying the number of requests to the server.
We often constrain ourselves to use a single file of several thousand lines, which is unreadable and difficult to maintain.

With SASS, it’s possible to organize your project into multiple files, which will be imported and compiled into a single minified CSS file.
This is made possible thanks to partials.

SASS partials

The name of a partial always begins with an underscore.
Ex : _reset.scss

Without this underscore, SASS would generate an additional file reset.css.

SCSS code from the _reset.scss file :

SCSS code from the main file style.scss :

Compiled CSS :

Thanks to the @import rule, you can opt for a modular organization, which will allow you to have a better-structured code that is easier to maintain (which is found in the SMACSS philosophy).