Utiliser @include ou @extend dans Sass ?

Question

Dans Sass, je n'arrive pas à discerner la différence entre l'utilisation de @include avec un mixin et en utilisant @extend avec une classe de remplacement. Cela ne revient-il pas au même ?

Answer 1

Les extensions ne permettent pas la personnalisation, mais elles 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 un CSS dupliqué, 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ésultats dans :

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 vous pouvez rendre votre code plus propre et plus facile à maintenir en utilisant efficacement les extensions et les mixins : http://thecodingdesigner.com/posts/balancing

Notez que SASS ne permet malheureusement pas d'utiliser des extensions à l'intérieur de media queries (et l'exemple correspondant du lien ci-dessus est faux). Dans le cas où vous avez besoin d'une extension basée sur des media queries, 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 soucier car la compression gzip du serveur web s'en chargera.

PS Notez que vous pouvez déclarer des classes de type "placeholder" dans les media queries.

Mise à jour 2014-12-28 : Prolonge produisent des CSS plus compacts que mixins mais cet avantage est réduit lorsque le CSS est gzippé. Si votre serveur sert des CSS compressés (il devrait vraiment le faire !), alors étend ne vous apportent presque aucun avantage. Vous pouvez donc toujours utiliser mixins ! Plus d'informations à ce sujet ici : http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

Une bonne approche est d'utiliser les deux - créer un mixin qui vous permettra de personnaliser beaucoup de choses et ensuite faire des extensions pour les configurations communes 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 my-button encore et encore. Cela signifie également que vous n'avez pas à vous souvenir des paramètres des boutons courants, mais que vous avez toujours la possibilité de créer un bouton unique si vous le souhaitez.

Je prends cet exemple dans un article de blog que j'ai écrit il n'y a pas longtemps. J'espère que cela vous aidera.

Answer 3

À mon avis, les extensions sont le mal absolu 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 toute la ligne de sélecteurs. Cela signifie que votre précieuse classe mystyle n'est plus bleue (pour de nombreux navigateurs). Qu'est-ce que cela signifie réellement ? Si, à un moment donné, vous utilisez un extend dont le navigateur ne comprend pas le sélecteur, toutes les autres utilisations de cet extend seront invalidées. Ce comportement permet également une imbrication maléfique :

%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 acceptable tant que vous ne l'utilisez pas avec des sélecteurs spécifiques au navigateur. Si vous le faites, il va soudainement détruire les styles partout où vous l'avez utilisé. Essayez plutôt d'utiliser les mixins !

Answer 4

Utilisez des mixins s'il accepte un paramètre, où la sortie compilée changera en fonction de ce que vous lui passez.

@include opacity(0.1);

Utilisez extend (avec placeholder) pour tout statique des blocs de styles répétables.

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

Answer 5

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 faisais des recherches sur ce thème, j'ai trouvé beaucoup de plaintes à propos de extend, donc gardez cela à l'esprit et s'il y a une possibilité d'utiliser un mixin au lieu de extend, sautez simplement extend.