Sass : imbrications, variables et mixins

Les notions

Imbrications

Opérateur &

Variables

Mixins

Proposition d'organisation de fichiers

L'imbrication (ou nesting) en SASS

Une des forces de SASS à sa création était de proposer une organisation du CSS imbriquée (ou dit nested en anglais), depuis cette fonctionnalité est également disponible nativement en CSS depuis 2023.

Exemple sans imbrication

nav ul {
    list-style:none;
    padding: .5rem .25rem;
}

nav ul li a{
    color : green;
    text-underline-offset: .2rem;
}

Le même code avec imbrication

nav {
    ul {
        list-style: none;
        padding: .5rem .25rem;
        
        li a {
            color : green;
            text-underline-offset: .2rem;
        }
    }
}

L'opérateur & en SASS

L'imbrication pose cependant un problème lorsque l'on veut, par exemple définir deux styles différents sur un même élément en fonction d'une pseudo-class (:hover par exemple), d'un pseudo-sélecteur (:nth-of-type par exemple) ou même sur un pseudo-élément (::before, ::after).

Pour éviter ce souci, on va utiliser l'opérateur & qui désigne l'élément courant des accolades en cours.

Exemple sans opérateur

a {
    color:green;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: .2rem;
}

Exemple avec opérateur

a {
    color:green;
    text-decoration: none;
    
    &:hover {
        text-decoration: underline;
        text-underline-offset: .2rem;
    }
}

Exercices sur l'imbrication

Les variables en SASS

SASS permet également l'utilisation de variables, un peu plus simplement que le CSS. Une utilisation assez classique des variables en SASS est de déterminer une palette de couleurs pour votre site :

$primary-color: blue;
$secondary-color: aquamarine;
$button-color: pink;

h1 {
  color: $primary-color;
}

Exercices sur les variables

Les mixins en SASS

SASS vous permet d'utiliser un principe très utile : les mixins. Une mixin c'est un bloc de code CSS réutilisable avec des toutes petites variations. Un peu comme une petite fonction avec des variables. Une façon simple et utile de les utiliser c'est pour charger des polices.

Exemple sans mixins

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    font-variation-settings:
            "wdth" 100;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: italic;
    font-variation-settings:
            "wdth" 100;
}

Exemple avec mixin

@mixin roboto($weight : 400, $style : normal) {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: $weight;
  font-style: $style;
  font-variation-settings:
          "wdth" 100;
}

Comme vous le voyez sur cet exemple une mixin peut avoir des valeurs par défaut.

Ensuite pour utiliser une mixin :

p {
    /* va utiliser les valeurs par défaut */
    @include roboto;
    
    /* va utiliser les valeurs qu'on lui passe */
    @include roboto(200, italic);
    
    /* 1ère valeur qu'on lui passe puis la seconde sera par défaut */
    @include roboto(800);
}

Exercices sur les mixins

Proposition d'organisation de fichiers

Je vous mets ici la façon donc j'organise mes fichiers SASS. Il n'existe pas de bonne pratique officielle puisqu'il existe de nombreuses méthodologies d'organisation du code (BEM par exemple).

- sass
    - components
        _buttons.scss
        _link.scss
        ...
    - layouts
        _homepage.scss
        _contact.scss
        ...
    - partials
        _header.scss
        _footer.scss
    - libraries
        _bootstrap.scss
        _reset.scss
        ...
    - vars
        _fonts.scss
        _colors.scss
    style.scss

Dans le dossier components je mets les composants qui peuvent être utilisés sur plusieurs pages.
Dans le dossier layouts le code concernant des templates (pages complètes)
Dans le dossier partials les éléments présents sur toutes les pages
Dans le dossier librairies, les bibliothèques utilisées pour le projet
Dans le dossier vars les différentes variables et mixins communes sur tout le projet

02 July 2025