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 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 serait normalement red mais div.container.desc serait bleu.

Comment puis-je nid à l'intérieur de container avec Sass?

  • Vous devez utiliser un double sélecteur de classe. Ce problème en est un parfait exemple de l'imbrication de l'option dans le Sass. Vous pouvez lire tout sur que ici kolosek.com/nesting-in-less-and-sass
InformationsquelleAutor matt | 2012-06-18
  1. 499

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

    Pour votre exemple:

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

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

    La & 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 la &.

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

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

    Cependant, vous pouvez placer le & à 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 être 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.

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

    • Juste une note de côté, une utilisation courante de & est lors de l'utilisation de pseudo-éléments et les pseudo-classes. Par exemple: &:hover.
    • Des fins d'exhaustivité, j'ai ajouté à ma réponse. Merci pour le commentaire.
    • Merci. J'ai pensé que j'étais stupide qu'il n'est pas mentionné dans les bases de guide! BTW les docs a déménagé à l'URL: sass-lang.com/documentation/...
    • Si & est utilisé à la fin d'une ligne, il met cette ligne au début du reste de la classe à tous les autres niveaux. Vous pouvez combiner les éléments en faisant &.desc sous .container, ce qui permettrait d'ajouter .desc pour elle, ce qui .container.desc
    • Nice souligné @écraser
    • scss-lint suggère d'utiliser des "&::hover" (double colones)
    • Qui ressemble à une erreur pour moi. :: est utilisé pour le pseude éléments. hover cependant est de la pseudo-classe et donc seulement de répondre avec un seul colon.

    InformationsquelleAutor Christoph
  2. 9

    Si c'est le cas, je pense que vous devez utiliser une meilleure façon de créer un nom de classe ou un nom de classe de la convention. Par exemple, comme vous l'avez dit vous voulez le .container classe pour avoir une couleur différente, selon un usage particulier ou à l'apparence. Vous pouvez faire ceci:

    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ée sur BEM Méthodologie dans la catégorie des conventions de nommage. Vous pouvez le vérifier sur ce lien: BEM — Bloc de l'Élément Modificateur de Méthodologie

    InformationsquelleAutor Murdock Helscream