SASS e Bootstrap - mixins vs. @extends

Question

Sto usando lo SASS port of Bootstrap e mi chiedo se ci sia qualche differenza tra l'utilizzo dei mixin predefiniti e l'uso di SASS @extends.

Per esempio, se ho

<div class="wrapper"> 
    Some content here.... 
</div> 

v'è alcuna differenza tra il fare

.wrapper { 
    @include make-row(); 
} 

e

.wrapper { 
    @extends .row; 
} 

Se non c'è alcuna differenza, ci sono altri mixin che aren' t equivalente a una singola dichiarazione @extends? Se non ci sono tali mixin, perché esistono anche i mixin?

Answer 1

La grande differenza tra @extends e un mixin è il modo in cui il css è compilato. Non sembra molto in semplici esempi, ma le differenze e le implicazioni sono significative e possono essere un vero mal di testa in natura se usate con noncuranza. @extends è un po 'come l'oro degli sciocchi, sembra grande in un primo momento, ma ...

Vediamo un semplice esempio:

@extends

.row { 
    width: 50px; 
} 
.new-row { 
    @extends .row; 
} 
.another-row { 
    @extends .row; 
} 

compila in:

.row, 
.new-row, 
.another-row { 
    width: 50px; 
} 

mixin

@mixin row() { 
    width: 50px; 
} 
.new-row { 
    @include row(); 
} 
.another-row { 
    @include row(); 
} 

compila in:

.new-row { 
    width: 50px; 
} 
.another-row { 
    width: 50px; 
} 

Un mixin include le proprietà in tutto il mondo è colpito - copia ogni volta - mentre un @extends gruppi selettori e definisce le proprietà di una volta. Questo non è immediatamente evidente, perché la differenza è nella css compilato ma ha alcune importanti implicazioni:

ordine Load

Con @extends i selettori vengono raggruppati al primo punto del sass dove si incontrano che possono portare ad una strana guida. Se si definisce un selettore e si utilizza @extend per inserire una proprietà e si tenta di sovrascrivere una proprietà definita in precedenza nella sass, ma dopo il punto in cui le proprietà estese sono raggruppate nel css, la sostituzione non funzionerà. Questo può essere abbastanza perplesso.

Consideriamo questo insieme logicamente ordinata di definizioni CSS e la probabile HTML: <div class='row highlight-row'></div>:

.red-text { 
    color: red; 
} 
.row { 
    color: green; 
} 
.highlight-row { 
    @extend .red-text; 
} 

compila in:

.red-text, 
.highlight-row { 
    color: red; 
} 
.row { 
    color: green; 
} 

Così, anche se l'ordinamento sass lo fa apparire come il colore fila sarebbe essere rosso, il css compilato lo renderà verde

Gruppi scarsi

@extend può causare selettori non raggruppati nel css risultante. Puoi finire con trenta o quaranta cose non correlate che condividono la stessa proprietà, ad esempio. Utilizzare @extends per i caratteri è un buon esempio di questo.

Nesting

Se si utilizza sass nidificazione (che non è buono, btw) e si utilizza @extends si duplicare il selettore completamente nidificato per ogni @extends in uso, con conseguente css gonfio. Ho visto questo molto:

.selector-1 .selector-2 .selector-3 .selector-4, 
.selector-1 .selector-2 .selector-3 .selector-4 a, 
.selector-1 .selector-2 .selector-3 .selector-4 li, 
.selector-1 .selector-2 .selector-3 .selector-4 td { 
    font-family: ariel; 
} 

Se siete nuovi a Sass vale la pena di guardare il css compilato.

Media Queries

@extends non funzionano all'interno di media query, perché le media query non sono selettori.

Conclusione

La mia regola è quella di utilizzare un @extends nel corso di un mixin se non avete i parametri e se si può ragionevolmente definire le @extends e condividerlo tra un paio di selettori strettamente correlati che esistono nelle vicinanze del sass, ad esempio, nello stesso file che definisce un modulo sass. I pulsanti sono un buon esempio di @extends ben utilizzati:

%button { 
    padding: 10px; 
} 
.call-to-action { 
    @extend %button; 
    background-color: $green; 
} 
.submit { 
    @extend %button; 
    background-color: $grey; 
} 

il miglior articolo per contribuire a rendere la scelta è here

PS, il segno % è un uso di placeholder extends