L’imbrication des règles est la principale caractéristique de SASS. Grâce à elle, l’écriture de votre code CSS est beaucoup plus rapide, simple et compréhensible selon le principe DRY (Don’t Repeat Yourself).
Imbrication de règle, exemple avec la couleur d’un lien et ses états hover et focus :
$link_color: #ce649b;
$color_hover: darken($link_color, 20%); // fonction SASS qui assombrit la couleur
$color_focus: lighten($link_color, 10%); // fonction SASS qui éclaircit la couleur
// & : représente l'élément parent
a {
color: $link_color;
&:hover {
color: $color_hover;
}
&:focus {
color: $color_focus;
}
}
CSS compilé :
.ice-blog a {
color: #ce649b;
}
.ice-blog a:hover {
color: #9b3168;
}
.ice-blog a:focus {
color: #da8bb4;
}
L’imbrication vous aidera à avoir un code propre, logique et bien organisé, qui devrait être plus facile à entretenir au cours du temps.
Bien-sûr, il est possible d’utiliser l’imbrication dans n’importe quel cas. Exemple avec les media queries :
.ice-blog {
max-width: 960px;
section {
background: blue;
}
@media screen and (max-width: 960px) {
max-width: 400px;
section {
background: pink;
}
}
}
CSS compilé :
.ice-blog {
max-width: 960px;
}
.ice-blog section {
background: blue;
}
@media screen and (max-width: 960px) {
.ice-blog {
max-width: 400px;
}
.ice-blog section {
background: pink;
}
}