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 :

body {
    line-height: 1;
    font-size: 16px;
    background: white;
}

SCSS code from the main file style.scss :

// Le nom du fichier sans l'underscore ou chemin vers ce fichier "include/reset" (où "include" est un dossier contenant tous les fichiers scss à inclure)
@import "reset";

.nav {
    overflow: hidden;
  
    li {
        float: left;
        background: grey;
    }
}

Compiled CSS :

body {
    line-height: 1;
    font-size: 16px;
    background: white;
}
.nav {
    overflow: hidden;
}
.nav li {
    float: left;
    background: grey;
}

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).

CONTACT US