Sass .scss: Nesting et plusieurs classes?

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

Exemple suivant:

HTML

Hello World

SCSS

 .container { background:red; color:white; .hello { padding-left:50px; } } 

Cela fonctionne très bien.

Puis-je gérer plusieurs classes en utilisant des styles nesteds?

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

CSS

 .container.desc { background:blue; } 

Dans ce cas, tout div.container serait normalement red mais div.container.desc serait bleu.

Comment puis-je imbriquer ce container interne avec Sass?

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; } } /* comstacks to: */ .container { background: red; } .container.desc { background: blue; } 

Le & va complètement résoudre, donc si votre sélecteur parent est nested lui-même, l’imbrication sera résolue avant de remplacer le & .

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

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

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

 .container { background:red; #id &{ background:blue; } } /* comstacks 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 recherche d’une règle spécifique dans votre feuille de style.

*: Aucun autre personnage que les espaces blancs n’est autorisé devant le & . Donc, vous ne pouvez pas faire une concaténation directe de selector + &#id& créer une erreur.

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 des classes. Vous pouvez vérifier ce lien: BEM – Méthodologie de modification des éléments de bloc