Utilizzo di @include vs @extend in Sass?

Question

In Sass, non riesco a distinguere la differenza tra l'utilizzo di @include con un mixin e l'utilizzo di @extend con una classe segnaposto. Non equivalgono alla stessa cosa?

Answer 1

Le estensioni non consentono la personalizzazione, ma producono CSS molto efficienti.

%button 
    background-color: lightgrey 
    &:hover, &:active 
    background-color: white 

a 
    @extend %button 

button 
    @extend %button 

Risultato:

a, button { 
    background-color: lightgrey; 
} 
a:hover, button:hover, a:active, button:active { 
    background-color: white; 
} 

Con mixins, si ottiene CSS duplicato, ma è possibile utilizzare gli argomenti per modificare il risultato per ogni utilizzo.

=button($main-color: lightgrey, $active-color: white) 
    background-color: $main-color 
    border: 1px solid black 
    border-radius: 0.2em 

    &:hover, &:active 
    background-color: $active-color 

a 
    +button 

button 
    +button(pink, red) 

Risultati in:

a { 
    background-color: lightgrey; 
    border: 1px solid black; 
    border-radius: 0.2em; 
} 
a:hover, a:active { 
    background-color: white; 
} 

button { 
    background-color: pink; 
    border: 1px solid black; 
    border-radius: 0.2em; 
} 
button:hover, button:active { 
    background-color: red; 
} 

Si prega di seguire questa serie consecutiva di esempi di codice per vedere come si può fare il vostro pulitore codice e più gestibile utilizzando estende e mixins efficace: http://thecodingdesigner.com/journal/balancing-ideal-sass-and-ideal-css

Nota che SASS purtroppo non consente l'uso di estensioni all'interno di query multimediali (e l'esempio corrispondente dal link sopra è sbagliato). Nella situazione in cui è necessario estendere in base a domande dei media, utilizzare un mixin:

=active 
    display: block 
    background-color: pink 

%active 
    +active 

#main-menu 
    @extend %active // Active by default 

#secondary-menu 
    @media (min-width: 20em) 
    +active // Active only on wide screens 

Risultato:

#main-menu { 
    display: block; 
    background-color: pink; 
} 

@media (min-width: 20em) { 
    #secondary-menu { 
    display: block; 
    background-color: pink; 
    } 
} 

duplicazione è inevitabile in questo caso, ma non si deve preoccuparsi troppo su di esso perché la compressione gzip del web server si prenderà cura di esso.

PS Si noti che è possibile dichiarare classi segnaposto all'interno di query multimediali.

Aggiornamento 2014/12/28: Estende producono più compatta CSS di mixins fanno, ma questo vantaggio è diminuito quando CSS viene compresso con gzip. Se il tuo server serve CSS compresso con gzip (dovrebbe davvero!), Quindi estende non ti dà quasi alcun beneficio. Quindi puoi sempre usare i mixin ! Maggiori informazioni su questo argomento: http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

Un buon approccio consiste nell'utilizzare entrambi: creare un mixin che consenta numerose personalizzazioni e quindi estendere le configurazioni comuni di tale mix. Per esempio (SCSS di sintassi):

@mixin my-button($size: 15, $color: red) { 
    @include inline-block; 
    @include border-radius(5px); 
    font-size: $size + px; 
    background-color: $color; 
} 
%button { 
    @include my-button; 
} 
%alt-button { 
    @include my-button(15, green); 
} 
%big-button { 
    @include my-button(25); 
} 

questo modo si evita di chiamare la mia pulsante mixin più e più volte. Significa anche che non devi ricordare le impostazioni per i pulsanti comuni, ma hai comunque la possibilità di creare un pulsante unico e unico nel tuo genere.

Prendo questo esempio da a blog post I wrote non molto tempo fa. Spero che questo ti aiuti.

Answer 3

Utilizzare mixins se accetta un parametro, in cui l'output compilato cambierà a seconda di ciò che si passa in esso.

@include opacity(0.1); 

Usa estendere (con segnaposto) per eventuali statici blocchi ripetibili di stili.

color: blue; 
font-weight: bold; 
font-size: 2em; 

Answer 4

Secondo me le estensioni sono il male puro e dovrebbero essere evitate. Ecco perché:

data la SCSS:

%mystyle {color: blue;} 
.mystyle-class {@extend %mystyle} 
//basically anything not understood by target browser (such as :last-child in IE8): 
::-webkit-input-placeholder {@extend %mystyle} 

il seguente CSS verrà generato:

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers 
    color: blue; 
} 

Quando un browser non capisce un selettore, è invalida l'intera linea di selettori . Ciò significa che la tua preziosa classe mystyle non è più blu (per molti browser). Cosa significa veramente? Se in qualsiasi momento si utilizza un'estensione in cui un browser potrebbe non comprendere il selettore, ogni altro uso dell'estensione verrà invalidato. Questo comportamento consente anche per la nidificazione del male:

%mystyle {color: blue;} 
@mixin mystyle-mixin {@extend %mystyle; height: 0;} 
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe? 
.mystyle-class {@extend %mystyle;} 

Risultato:

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers 
    color: blue; 
} 

::-webkit-input-placeholder { 
    height: 0; 
} 

Tl; dr: @extend è perfettamente ok per il tempo che non si utilizza mai con qualsiasi selettore del browser spesific. Se lo fai, improvvisamente distruggerà gli stili ovunque tu lo abbia usato. Prova invece a fare affidamento sui mixin!