nidification des classes CSS: maintenant rendu possible

Dans les versions CSS précédentes, l'idée de nidification était insaisissable. Les développeurs ont dû recourir à des techniques plus complexes pour obtenir des effets similaires. Cependant, le module de nidification CSS a ouvert de nouvelles possibilités.

pouvez-vous nidifier les classes CSS?

La réponse est une "oui." Avec le module de nidification CSS, vous pouvez adopter la syntaxe suivante:

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

Cette syntaxe vous permet de nidiquer des classes, créant des structures hiérarchiques.

Exemples d'implémentations

Voici quelques exemples présentant la puissance de CSS Nesting:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child   td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

Avec CSS Nest, vous pouvez maintenant écrire deshets de style plus concis et maintenables. Profitez de la flexibilité accrue et de la structure sémantique qu'il fournit.