Sass .scss: Nidification et plusieurs classes?

Question

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 lors de l'utilisation des styles imbriqués.

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

CSS

.container.desc {
    background:blue;
}

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

Comment puis-je nest ce à l'intérieur d' container avec Sass?

Toutes les idées sur qui? Est-il même possible?

Answer 1

Vous pouvez utiliser &, il sera remplacé par le parent sélecteur d'après la compilation:

Pour ton exemple:

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

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

Voir les Docs à la Section Parent Références.
L' & permettra de résoudre complètement, donc si votre parent sélecteur est imbriquée lui-même, l'imbrication sera résolu avant de remplacer l' &.
Notez que vous pouvez placer l' & à pratiquement n'importe quelle position que vous aimez^*, donc la suite est aussi possible:

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

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

Cependant, soyez conscient que ce en quelque sorte les pauses de votre structure imbriquée et peut donc augmenter l'effort de trouver une règle spécifique dans votre feuille de style.

*: Pas d'autres caractères que les espaces sont autorisés, en face de l' &. Si vous ne pouvez pas faire directement une concaténation de selector+& - #id& permettrait de lever une erreur.