Utiliser @include vs @extend dans Sass?

Les extensions ne permettent pas la personnalisation, mais produisent des CSS très efficaces.

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

Résultat:

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

Avec les mixins, vous obtenez des CSS dupliqués, mais vous pouvez utiliser des arguments pour modifier le résultat pour chaque utilisation.

 =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) 

Résulte en:

 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; } 

Veuillez suivre cet ensemble consécutif d’exemples de code pour voir comment rendre votre code plus propre et plus facile à entretenir en utilisant efficacement les extensions et les mixins: http://thecodingdesigner.com/journal/balancing-ideal-sass-and-ideal-css

Notez que SASS ne permet malheureusement pas d’utiliser les extensions à l’intérieur des requêtes média (et l’exemple correspondant du lien ci-dessus est incorrect). Dans le cas où vous devez étendre votre travail en fonction de requêtes multimédias, utilisez 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 

Résultat:

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

La duplication est inévitable dans ce cas, mais vous ne devriez pas trop vous en préoccuper car la compression gzip du serveur Web en prendra soin.

PS Notez que vous pouvez déclarer des classes d’espace réservé dans les requêtes de média.

Mise à jour 28/12/2014 : Les extensions produisent des CSS plus compactes que les mixins , mais cet avantage diminue lorsque CSS est compressé. Si votre serveur sert du CSS compressé (il le devrait vraiment!), Alors les extensions ne vous apportent pratiquement aucun avantage. Donc, vous pouvez toujours utiliser des mixins ! Plus à ce sujet ici: http://www.sitepoint.com/sass-extend-nobody-told-you/

Une bonne approche consiste à utiliser les deux – créer un mixin qui vous permettra beaucoup de personnalisation et ensuite élargir les configurations courantes de ce mixin. Par exemple (syntaxe SCSS):

 @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); } 

Cela vous évite d’appeler le mixin sur mon bouton encore et encore. Cela signifie également que vous n’avez pas à vous souvenir des parameters des boutons courants, mais vous avez toujours la possibilité de créer un bouton unique et unique si vous le souhaitez.

Je prends cet exemple d’ un article de blog que j’ai écrit il n’y a pas longtemps. J’espère que cela t’aides.

À mon avis, les extensions sont pures et doivent être évitées. Voici pourquoi:

étant donné le 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} 

Le css suivant sera généré:

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

Lorsqu’un navigateur ne comprend pas un sélecteur, il invalide la ligne entière des sélecteurs. Cela signifie que votre précieuse classe mystyle n’est plus bleue (pour de nombreux navigateurs). Qu’est-ce que cela signifie vraiment? Si, à un moment quelconque, vous utilisez une extension où un navigateur peut ne pas comprendre le sélecteur, toute autre utilisation de l’extension sera invalidée. Ce comportement permet également d’imbriquer mal:

 %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;} 

Résultat:

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

Tl; dr: @extend est parfaitement correct tant que vous ne l’utilisez jamais avec des sélecteurs spécifiques au navigateur. Si vous le faites, les styles disparaîtront soudainement partout où vous l’avez utilisé. Essayez plutôt de vous fier aux mixins!

Utilisez les mixins si elle accepte un paramètre, où la sortie compilée changera en fonction de ce que vous y passez.

 @include opacity(0.1); 

Utilisez extend (avec espace réservé) pour tous les blocs de styles reproductibles statiques .

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

Je suis tout à fait d’accord avec la réponse précédente de d4nyll. Il y a un texte à propos de l’option extend et pendant que je cherchais ce thème, j’ai trouvé beaucoup de plaintes à propos de extend.