web-dev-qa-db-fra.com

Sass .scss: Nidification et plusieurs classes?

J'utilise Sass (.scss) pour mon projet actuel.

Exemple suivant:

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

Cela fonctionne très bien.

Puis-je gérer plusieurs classes tout en utilisant des styles imbriqués?.

Dans l'exemple ci-dessus, je parle de ceci:

CSS

.container.desc {
    background:blue;
}

Dans ce cas, tous les div.container seraient normalement red mais div.container.desc serait en bleu.

Comment puis-je imbriquer cela dans container avec Sass?

sass
283
matt

Vous pouvez utiliser le référence du sélecteur parent&, il sera remplacé par le sélecteur parent après la compilation:

Pour votre exemple:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

Le & sera complètement résolu. Par conséquent, si votre sélecteur parent est imbriqué, l'imbrication sera résolue avant de remplacer le &.

Cette notation est le plus souvent utilisée pour écrire pseudo-éléments et-classes :

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

Cependant, vous pouvez placer le & à pratiquement n’importe quelle position*, ce qui suit est également possible:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

Cependant, sachez que cela casse en quelque sorte votre structure d'imbrication et peut donc augmenter l'effort de recherche d'une règle spécifique dans votre feuille de style.

*: Aucun autre caractère que les espaces ne sont autorisés devant le &. Donc, vous ne pouvez pas faire une concaténation directe de selector + & - #id& jetterait une erreur.

506
Christoph

Si tel est le cas, je pense que vous devez utiliser un meilleur moyen de créer un nom de classe ou une convention de nom de classe. Par exemple, comme vous l'avez dit, vous voulez que la classe .container ait une couleur différente en fonction d'un usage ou d'une apparence spécifique. Tu peux le faire:

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

Le code ci-dessus est basé sur la méthodologie BEM dans les conventions de dénomination de classe. Vous pouvez vérifier ce lien: BEM - Méthodologie du modificateur d'élément de bloc

9
Murdock Helscream