sass
Przedłużenie / dziedziczenie

Składnia

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

Parametry

Uwagi

Rozszerz klasę

.message
  color: white

.message-important
  @extend .message
  background-color: red

Spowoduje to pobranie wszystkich stylów z .message i dodanie ich do .message-important . Generuje następujący CSS:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Rozszerz z wielu klas

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

W powyższym kodzie @extend jest używany w jednym wierszu, aby dodać kod wielu klas do .message-important , jednak możliwe jest użycie jednego rozszerzenia w wierszu w następujący sposób:

.message-important
    @extend .message
    @extend .important

Każda z tych metod wygeneruje następujący CSS:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

Łańcuch rozciąga się

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Ten kod powoduje .message-error rozszerzenia z .message-important , co oznacza, że będzie on zawierał kod z obu .message-important i .message , ponieważ .method-important rozciąga się od .message . Powoduje to następujący CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Oświadczenie: Upewnij się, że klasy, z których się rozwijasz, występują tylko raz w kodzie, w przeciwnym razie Sass może wygenerować niechlujny, zawiły CSS.

Opcjonalne rozszerzenia

Czasami możesz chcieć, aby @extend był opcjonalny i nie wymagał, aby określona klasa istniała w kodzie.

.message-important
  @extend .message !optional
  background: red

Spowoduje to następujący CSS:

.message-important {
  background: red;
}

Oświadczenie: Jest to przydatne podczas programowania, gdy możesz nie napisać jeszcze całego kodu i nie chcesz błędów, ale prawdopodobnie powinien zostać usunięty podczas produkcji, ponieważ może prowadzić do nieoczekiwanych rezultatów.

Symbole zastępcze

Czasami tworzysz klasy, które nie będą używane same w sobie, a raczej będą rozszerzane tylko w innych zestawach reguł. Oznacza to, że skompilowany plik CSS będzie większy niż powinien. Selektory zastępcze rozwiązują ten problem.

Selektory zastępcze są podobne do selektorów klas, ale używają znaku procentu (%) zamiast (.) Używanego dla klas. Nie pojawią się w skompilowanym CSS.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Spowoduje to kompilację do następującego CSS:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Rozszerzanie rodzica

Zazwyczaj próbuje się rozszerzyć rodzica tak:

.parent {
  style: value;

  @extend &;
}

Spowoduje błąd, informujący, że rodzic nie może zostać przedłużony. Ma to sens, ale istnieje obejście tego problemu. Po prostu zapisz selektor nadrzędny w zmiennej.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

W powyższym przykładzie nie ma żadnej korzyści, ale daje to możliwość zawijania stylów nadrzędnych z dołączonego miksu.