Lors de l'extension d'un sélecteur avec la @extenddirective, Sass ne prend pas le contenu CSS du sélecteur étendu pour le placer dans celui qui s'étend. Cela fonctionne dans l'autre sens. Il prend le sélecteur d'extension et l'ajoute au sélecteur étendu.
En raison de son fonctionnement, il est impossible de l'utiliser à partir de différentes portées. Par exemple, vous ne pouvez pas étendre un espace réservé qui a été déclaré dans un @mediabloc, ni étendre un espace réservé à partir de la racine si vous êtes dans une @mediadirective.
Nous pouvons sûrement trouver un moyen d'utiliser @extendlorsque cela est possible, mélanger autrement. En effet, c'est faisable mais c'est un peu délicat, j'appelle cela le hack mixtend. Vous voudrez peut-être réfléchir à deux fois avant de l'implémenter partout dans votre projet. Il serait peut-être plus facile d'utiliser uniquement des mixins. Je vous laisse le juge de cela.
Emballage @extend
L'idée est en fait assez simple à saisir. Nous définissons d'abord le mixin. Le seul paramètre est $extend, qui définit si oui ou non le mixin doit essayer d'étendre plutôt que d'inclure. De toute évidence, il s'agit d'un booléen (par défaut true).
Si $extendc'est le cas true, nous étendons un espace réservé nommé d'après le mixin (malheureusement, ce n'est pas calculé automatiquement). Si c'est le cas false, nous vidons le code CSS comme le ferait un mixin normal.
Hors du mixin, nous définissons l'espace réservé susmentionné. Pour éviter de répéter le code CSS dans l'espace réservé, il suffit d'inclure le mixin en définissant $extendsur falsepour qu'il vide le code CSS dans le noyau de l'espace réservé.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Exemple
A titre d'exemple simple, nous utiliserons le micro-clearfix de Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Son utilisation est assez simple:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Résultat CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Extrait de texte sublime
Si vous souhaitez enregistrer le passe-partout afin de le rendre hautement réutilisable, vous serez heureux de savoir qu'il est très facile de créer un extrait de texte Sublime pour cela. Dans Sublime, accédez à Outils> Nouvel extrait… et collez le contenu ci-dessous.
N'hésitez pas à changer la clé pour mettre ce qui flotte sur votre bateau; c'est le mot à taper avant de cliquer tabpour développer l'extrait. Je suis allé avec mixtend.
mixtend source.scss