Używasz @include vs @extend w Sass?

W Sassie nie do końca dostrzegam różnicę między używaniem @includez mieszanką a używaniem @extendz klasą zastępczą. Czy nie sprowadzają się do tego samego?

Rozszerzenia nie pozwalają na dostosowywanie, ale generują bardzo wydajny CSS.

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

a
  @extend %button

button
  @extend %button

Wynik:

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

Dzięki mieszankom otrzymujesz zduplikowane CSS, ale możesz użyć argumentów, aby zmodyfikować wynik dla każdego użycia.

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

Prowadzi do:

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

Postępuj zgodnie z poniższym zestawem przykładów kodu, aby zobaczyć, jak możesz uczynić swój kod czystszym i łatwiejszym w utrzymaniu, efektywnie stosując rozszerzenia i mieszanki: http://thecodingdesigner.com/posts/balancing

Zwróć uwagę, że SASS niestety nie pozwala na używanie rozszerzeń w zapytaniach o media (a odpowiedni przykład z powyższego linku jest nieprawidłowy). W sytuacji, gdy potrzebujesz rozszerzyć na podstawie zapytań o media, użyj miksu:

=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

Wynik:

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

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

W tym przypadku powielanie jest nieuniknione, ale nie powinieneś się tym zbytnio przejmować, ponieważ zajmie się tym kompresja gzip serwera WWW.

PS Pamiętaj, że w zapytaniach o media możesz zadeklarować klasy zastępcze.

Aktualizacja 2014-12-28 : Rozszerzenia tworzą bardziej zwarty CSS niż miksery , ale ta korzyść jest mniejsza , gdy CSS jest spakowany gzipem. Jeśli twój serwer obsługuje CSS spakowany gzipem (naprawdę powinien!), Rozszerzenia nie dają prawie żadnych korzyści. Więc zawsze możesz używać mixinów ! Więcej na ten temat tutaj: http://www.sitepoint.com/sass-extend-nobody-told-you/

Dobrym podejściem jest użycie obu - stwórz mixin, który pozwoli ci na wiele dostosowań, a następnie rozszerzy typowe konfiguracje tego miksu. Na przykład (składnia 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);
}

Dzięki temu nie musisz w kółko wywoływać miksera my-button. Oznacza to również, że nie musisz pamiętać ustawień typowych przycisków, ale nadal masz możliwość stworzenia super unikalnego, jednorazowego przycisku, jeśli wybierzesz.

Biorę ten przykład z posta na blogu, który napisałem niedawno. Mam nadzieję że to pomoże.

Moim zdaniem rozciągnięte są czystym złem i należy ich unikać. Oto dlaczego:

biorąc pod uwagę 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}

Zostanie wygenerowany następujący plik CSS:

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

Gdy przeglądarka nie rozpoznaje selektora, unieważnia całą linię selektorów. Oznacza to, że twoja cenna klasa mystyle nie jest już niebieska (dla wielu przeglądarek). Co to tak naprawdę znaczy? Jeśli w jakimkolwiek momencie użyjesz rozszerzenia, w którym przeglądarka może nie zrozumieć selektora, każde inne użycie rozszerzenia zostanie unieważnione. To zachowanie pozwala również na złe zagnieżdżanie:

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

Wynik:

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

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

Tl; dr: @extend jest całkowicie w porządku, o ile nigdy nie używasz go z żadnymi specjalistycznymi selektorami przeglądarki. Jeśli to zrobisz, nagle zniszczy style w każdym miejscu, w którym go użyłeś. Zamiast tego spróbuj polegać na mieszankach!

Użyj mixins, jeśli akceptuje parametr, gdzie skompilowane wyjście będzie się zmieniać w zależności od tego, co do niego przekażesz.

@include opacity(0.1);

Użyj rozszerzenia (z symbolem zastępczym) dla dowolnych statycznych powtarzalnych bloków stylów.

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

Całkowicie zgadzam się z poprzednią odpowiedzią d4nyll. Jest tam tekst o opcji rozszerzania i kiedy badałem ten temat, znalazłem wiele skarg dotyczących rozszerzenia, więc pamiętaj o tym i jeśli istnieje możliwość użycia mixin zamiast rozszerzenia, po prostu pomiń rozszerzenie.