sass
Nidification

Nidification de base

Chaque fois que vous déclarez une nouvelle règle dans une autre règle, elle est appelée imbrication. Avec l'imbrication de base, comme illustré ci-dessous, le sélecteur imbriqué sera compilé en tant que 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 de nidification

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 à nidifier et à continuer d'inclure tous les enfants dans un nid, un nid ou 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 jeu de margin . Disons que nous voulons remplacer cela plus tard dans une requête média.

@media (max-width: 480) {

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

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

Ainsi, en imbriquant trop profondément, vous devrez vous nicher à nouveau chaque fois que vous voudrez écraser une certaine valeur. Pire encore, c'est souvent la règle !important

@media (max-width: 480) {

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

Pourquoi la règle !important Important est-elle une mauvaise idée?

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

Réutilisabilité

Ceci est assez similaire au problème de la spécificité, mais mérite d’être souligné séparément. Si vous donnez un style à un bouton ou même à un menu déroulant, vous pouvez 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 situé en haut de votre SCSS). Cela vous amène à copier des styles et à les coller ailleurs. Peut-être dans une autre règle imbriquée.

Vos feuilles de style deviendront de plus en plus grandes et difficiles à gérer.

À quelle profondeur devriez-vous nicher?

La plupart des guides de style définissent la profondeur maximale à 2. C'est un bon conseil en général, car il y a très peu d'occasions où vous souhaiteriez nicher 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 «sauter» de l'endroit où vous l'avez imbriqué dans votre Sass, ce qui vous ramène au niveau supérieur. Cela vous permet de garder les styles groupés sans créer plus de spécificité que nécessaire.

Par exemple, vous pourriez avoir quelque chose comme ceci:

.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 réunis dans le SCSS, mais nous n'avons pas nécessairement besoin de cette classe dans chaque sélecteur.

Contextes exclus

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, resteront là.

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

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

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

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

Pour plus d'informations, voir la documentation officielle

Le sélecteur parent (&)

L'imbrication est idéale pour conserver les sélecteurs associés afin que les futurs développeurs puissent mieux comprendre votre code. Le sélecteur parent, représenté par une esperluette ("&"), peut vous aider dans des situations plus complexes. Il y a plusieurs façons de l'utiliser.

Créez un nouveau sélecteur qui requiert à 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;
}

Etats et pseudo-éléments

Outre l'utilisation de l'imbrication pour les classes et les enfants, l'imbrication avec le sélecteur parent est généralement 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 des 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 au namespace border . Pour écrire moins, nous pouvons utiliser l'imbrication de propriété et ignorer ces préfixes, même sur 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 1px solid red et 1px solid red . Nous pouvons écrire des CSS encore moins répétitifs avec:

// 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;
}