SASS - L'imbrication

SASS - L'imbrication
SASS

26 July 2021

Quand vous intégrez un modèle, vous imbriquez automatiquement vos tags HTML de façon à rendre vos fichiers lisibles et clairs. Le CSS ne nous permet pas d'imbriquer nos sélecteurs de la même manière et on peut vite se perdre dans un fichier très long.

Sass nous permet cette imbrication afin de rendre nos feuilles de styles organisées et claires dans leur ensemble.

Utilisation

Prenons l'exemple d'un petit bout de code HTML :

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Example SCSS</title>
        <link rel="stylesheet" href="assets/css/main.css">
    </head>
    <body>
        <div class="alert">
            <p>I'm a alert!</p>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
       </nav>
    </body>
</html>
.alert {
    background-color: green;
    color: white;
    padding: 10px;
}

nav {
    ul {
        list-style: none;
        display: flex;
        gap: 30px;

        li {
            a {
                text-decoration: none;
                color: gray;
            }
        }
    }
}

Comme vous pouvez le constater, j'ai respecté la même architecture que le code HTML pour la nav. Cela rend le code bien plus lisible et facile à maintenir par la suite.

Alors, n'en abusez pas pour autant. Au moment de la compilation en CSS, vous pouvez vous retrouver avec énormément de sélecteurs CSS, ce qui viendrait alourdir et rendre indigeste votre feuille de style.

Résultat en CSS :

.alert {
    background-color: green;
    color: white;
    padding: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li a {
    text-decoration: none;
    color: gray;
}

Le sélecteur parent &

Le sélecteur parent & permet d'ajouter une pseudo-classe comme un hover à son parent.

Reprenons le code ci-dessus. Si je souhaite effectuer un hover sur mes liens en CSS, j'utiliserais le code suivant :

nav ul li a {
    text-decoration: none;
    color: gray;
}

nav ul li a:hover {
    color: red;
}

Comme vous pouvez le voir, il n'y a aucun espace entre le a et le :hover, sinon cela ne fonctionnerait pas.
Maintenant, voyons à quoi ressemblerait le même code en Sass :

nav {
    ul {
        list-style: none;
        display: flex;
        gap: 30px;

        li {
            a {
                text-decoration: none;
                color: gray;

                &:hover {
                    color: red;
                }
            }
        }
    }
}