web-dev-qa-db-fra.com

SCSS étendre un sélecteur imbriqué et remplacer les ensembles de règles imbriqués

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

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

Je veux l'étendre et ajouter à la classe .title:

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

La réponse que je veux est la suivante:

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

Cependant, la réponse que je reçois est la suivante:

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

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

Est-ce que je fais quelque chose de mal ou est-ce juste comment cela fonctionne? Pour clarifier je veux le fusionner. Si j'ajoute quelque chose directement dans le .superblock et que j'ajoute un autre .superblock2 qui étend également le bloc%, ils fusionnent sans aucun problème.

csssass
17
Todilo

Sass n'a aucune fonctionnalité pour "fusionner" les sélecteurs en double. Vous aurez besoin de trouver un autre utilitaire pour le faire après la compilation du CSS.

La directive @extend n'est pas simplement un moyen d'utiliser des classes à la place de mixins (similaire aux appels de mixin de style LESS). Pourquoi @extend fonctionne comme cela devient clair lorsque vous étendez des classes normales au lieu d'étendre des classes:

.block {
  font-size:12px;
}

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

Sortie:

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

.foo {
  font-weight: bold;
}

L'utilisation d'une classe d'extension supprime simplement l'émission du nom de la classe d'origine.

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

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

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

Sortie:

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

C'est à peu près ça. SASS produit des déclarations étendues séparément.

Et il n’a aucune fonctionnalité de regroupement des déclarations par sélecteur, ce n’est pas si malin.

Mais vous n'avez pas à vous soucier de la propreté de CSS. Les serveurs Web modernes servent les fichiers CSS gzippés, toute duplication sera bien compressée.

2
Andrey Mikhaylov - lolmaus

MOINS peut le faire. Cependant vous écririez:

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

Pas sûr que cela fonctionne aussi avec @extend.

0
brannigan