Sass.scss: imbrication 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'échantillon ci-dessus, je parle de ceci:
CSS
.container.desc {
background:blue;
}
, Dans ce cas, tous les div.container serait normalement red, mais div.container.desc serait bleu.
Comment puis-je imbriquer cela à l'intérieur container avec Sass?
2 réponses
Vous pouvez utiliser la 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 {[3] } se résoudra complètement, donc si votre sélecteur parent est lui-même 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 tu aimes*, donc, ce qui suit est possible aussi:
.container {
background:red;
#id &{
background:blue;
}
}
/* compiles to: */
.container {
background: red;
}
#id .container {
background: blue;
}
Cependant, sachez que cela brise en quelque sorte votre structure d'imbrication et peut donc augmenter l'effort de trouver une règle spécifique dans votre feuille de style.
*: aucun autre caractère que les espaces blancs n'est autorisé devant le &. Donc vous ne pouvez pas faire une concaténation directe de selector+& - #id& jetterait une erreur.
Si tel est le cas, je pense que vous devez utiliser une meilleure façon 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'une utilisation ou d'une apparence spécifique. Vous pouvez 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 nommage de classe. Vous pouvez vérifier ce lien: bem - block element Modifier Methodology