Quando si estende un selettore con la @extenddirettiva, Sass non prende il contenuto CSS dal selettore esteso per metterlo in quello di estensione. Funziona al contrario. Prende il selettore di estensione e lo aggiunge a quello esteso.
A causa di come funziona, rende impossibile utilizzarlo da diversi ambiti. Ad esempio, non puoi estendere un segnaposto che è stato dichiarato in un @mediablocco, né puoi estendere un segnaposto da root se ti trovi all'interno di una @mediadirettiva.
Sicuramente possiamo trovare un modo da usare @extendquando possibile, mescolando altrimenti. In effetti, è fattibile ma è un po 'complicato, lo chiamo hack mixtend. Potresti pensarci due volte prima di implementare ovunque nel tuo progetto. Forse usare solo i mixin sarebbe più facile. Lascio a te il giudice.
Avvolgimento @extend
L'idea è in realtà abbastanza semplice da comprendere. Per prima cosa definiamo il mixin. L'unico parametro è $extend, che definisce se il mixin deve tentare di estendere anziché includere. Ovviamente è un valore booleano (predefinito su true).
Se $extendè true, estendiamo un segnaposto prende il nome dal mixin (purtroppo, questo non è automagicamente calcolato). Se lo è false, scarichiamo il codice CSS come farebbe un normale mixin.
Fuori dal mixin, definiamo il segnaposto di cui sopra. Per evitare di ripetere il codice CSS nel segnaposto, dobbiamo solo includere il mixin impostando $extendsu in falsemodo che scarichi il codice CSS nel nucleo del segnaposto.
/// *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); )Esempio
Come semplice esempio, useremo il micro-clearfix di Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Usarlo è abbastanza semplice:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Risultato CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Sublime frammento di testo
Se vuoi salvare il boilerplate per renderlo altamente riutilizzabile, sarai felice di sapere che è molto facile creare uno snippet di Sublime Text per questo. In Sublime, vai su Strumenti> Nuovo snippet ... e incolla il contenuto di seguito.
Sentiti libero di cambiare la chiave per mettere qualunque cosa galleggi sulla tua barca; è la parola da digitare prima di premere tabper espandere lo snippet. Sono andato con mixtend.
mixtend source.scss