Nidification

Imbrication de base #

Chaque fois que vous déclarez une nouvelle règle à l’intérieur d’une autre règle, cela s’appelle l’imbrication. Avec l’imbrication de base, comme indiqué ci-dessous, le sélecteur imbriqué sera compilé comme un nouveau sélecteur CSS avec tous ses parents ajoutés, séparés par un espace.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Profondeur d’imbrication #

L’imbrication est une fonctionnalité très puissante, mais doit être utilisée avec prudence. Il peut arriver assez facilement et rapidement, que vous commenciez à faire des nids et que vous continuiez à inclure tous les enfants dans un nid, d’un nid, d’un nid. Permettez-moi de démontrer:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

Problèmes #

Spécificité #

Le li de l’exemple ci-dessus a un ensemble margin. Disons que nous voulons remplacer cela dans une requête multimédia plus tard.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Donc, en imbriquant trop profondément, vous devrez à nouveau imbriquer profondément chaque fois que vous voudrez écraser une certaine valeur. Pire encore, c’est souvent là que la règle « !important » est utilisée.

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Pourquoi la règle !important est une mauvaise idée

Vous devez écrire votre SCSS de manière à ce que ces solutions de contournement ne soient même pas nécessaires en premier lieu. Utiliser !important sur un problème aussi mineur vous conduira déjà dans un terrier de lapin !

Réutilisabilité #

Ceci est assez similaire au problème de spécificité, mais mérite d’être souligné séparément. Si vous stylisez quelque chose comme un bouton ou même une liste déroulante, vous voudrez peut-être réutiliser ces styles ailleurs sur votre page.

En imbriquant trop profondément, vos styles ne sont liés qu’aux éléments situés à l’intérieur du parent le plus externe (l’élément en haut de votre SCSS). Cela vous amène à copier des styles et à les coller à nouveau ailleurs. Peut-être dans une autre règle imbriquée.

Vos feuilles de style deviendront de plus en plus grandes et plus difficiles à maintenir.

A quelle profondeur faut-il nicher ? #

La plupart des guides de style fixent la profondeur maximale à 2. C’est un bon conseil en général, car il n’y a que très peu d’occasions où vous voudriez imbriquer plus profondément. La plupart du temps, 2 suffisent.

Imbrication avec @at-root #

L’imbrication est probablement le plus souvent utilisée pour créer des sélecteurs plus spécifiques, mais elle peut également être utilisée simplement pour l’organisation du code. En utilisant la directive @at-root, vous pouvez “sortir” de l’endroit où vous l’imbriquez dans votre Sass, vous ramenant au niveau supérieur. Cela vous permet de garder les styles regroupés sans créer plus de spécificité que nécessaire.

Par exemple, vous pourriez faire quelque chose comme ça :

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Cela compilerait à ceci:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

En faisant cela, tous nos styles liés à la classe .item sont ensemble dans le SCSS, mais nous n’avons pas nécessairement besoin de cette classe dans chaque sélecteur.

Hors contextes

Par défaut, les déclarations à l’intérieur de @at-root apparaîtront dans n’importe quel contexte. Cela signifie que les règles à l’intérieur d’un bloc @media par exemple y resteront.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Ce comportement n’est pas toujours souhaité, vous pouvez donc exclure le contexte du média en passant media à l’option without de la directive @at-root.

@at-root (without: media) {..

Pour plus d’informations, consultez la [documentation officielle][1]

[1] : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#at-root

Le sélecteur parent (&) #

L’imbrication est idéale pour regrouper les sélecteurs associés afin de faciliter la compréhension de votre code par les futurs développeurs. Le sélecteur parent, représenté par une esperluette ("&") peut aider à le faire dans des situations plus complexes. Il existe plusieurs façons de l’utiliser.

Créez un nouveau sélecteur qui nécessite à la fois le sélecteur parent et un autre sur le même élément en plaçant le nouveau sélecteur directement après un sélecteur parent.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Faites apparaître le parent après un sélecteur imbriqué dans le CSS compilé en plaçant le sélecteur parent après le sélecteur imbriqué.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

États et pseudo-éléments #

Outre l’utilisation de l’imbrication pour les classes et les enfants, l’imbrication avec le sélecteur parent est également couramment utilisée pour combiner les états de :active, :hover et :focus pour les liens.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

De même, vous pouvez styliser les pseudo-éléments en les imbriquant avec le sélecteur parent.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Propriétés d’imbrication #

Certaines propriétés CSS appartiennent à un espace de noms, par exemple border-right appartient à l’espace de noms border. Pour écrire moins, nous pouvons utiliser l’imbrication des propriétés et ignorer ces préfixes, même à plusieurs niveaux.

Si nous devions créer une bordure à droite et à gauche d’une classe nommée “.borders”, nous pourrions écrire ceci :

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Cela nous évite d’avoir à écrire border-right et border-left, mais nous écrivons toujours du code répétitif avec les lignes 1px solid black et 1px solid red. On peut écrire des CSS encore moins répétitifs avec ce qui suit :

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}