SCSS étend un sélecteur imbriqué et remplace les jeux de règles imbriqués

Ok, donc j'ai un espace réservé avec un imbriquée sélecteur:

%block {
  .title {
    font-size:12px;
  }
}

Je veux prolonger et AJOUTER à la .title classe:

.superblock {
  @extend %block;
  .title {
    font-weight:bold;
  }
}

La réponse que je VEUX, c'est ceci:

.superblock .title {
  font-size: 12px;
  font-weight: bold; }

Cependant, la réponse que j'obtiens est: est-ce

.superblock .title {
  font-size: 12px; }

.superblock .title {
  font-weight: bold; }

Je fais quelque chose de mal ou est-ce juste la façon dont il fonctionne? Pour clarifier, je veux fusionner. Si j'ajoute quelque chose à l'intérieur de la .superblock et d'ajouter, comme un autre .superblock2 qui s'étend également %de bloc de fusion sans aucun problème.

source d'informationauteur Todilo

  1. 25

    Sass a pas de fonctionnalité pour une "fusion" double sélecteurs. Vous aurez besoin de trouver un autre utilitaire pour le faire après la CSS a été compilé.

    La @extend la directive n'est pas seulement un moyen d'utiliser les classes à la place de mixin (similaire à MOINS de style mixin appels). Pourquoi @extend fonctionne comme il le fait devient évident lorsque vous êtes à l'extension de classes normales, au lieu d'étendre des classes:

    .block {
  font-size:12px;
}

.foo {
    @extend .block;
    font-weight: bold;
}

    De sortie:

    .block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

    À l'aide d'un étendre la classe tout simplement supprime l'émission de la classe d'origine de nom.

    Maintenant que vous avez vu pourquoi @extend fonctionne comme il le fait, voulez-vous toujours ce que @extend offre? Si la réponse est non, alors vous devez utiliser un mixin:

    @mixin block {
    //styles
    .title {
        font-size: 12px;
        @content;
    }
}

.superblock {
    @include block {
        font-weight: bold;
    }
}

    De sortie:

    .superblock .title {
  font-size: 12px;
  font-weight: bold;
}
  2. 2

    C'est à peu près tout. SASS produit de l'étendue des déclarations séparément.

    Et il n'a pas de fonctionnalité de regroupement des déclarations du sélecteur, il n'est pas intelligent.

    Mais vous devez vous inquiétez pas beaucoup sur CSS propreté. Web moderne des serveurs CSS au format gzip, toute reproduction sera bien compressé.

  3. 0

    MOINS peut le faire. Cependant, on peut écrire:

    .superblock {
  .title {
    .block .title;
  }
}

    Ne sais pas si il fonctionne avec @étendre trop.

  4. -2

    Vous pouvez utiliser des outils, je l'ai utilisé pour nettoyer le css
    https://github.com/addyosmani/grunt-uncss

    "Un grognement tâche pour retirer inutilisés CSS de vos projets avec UnCSS."