Extend i selektory zastępcze

@extend umożliwia jednemu selektorowi przejęcie wszystkich stylów innego selektora. Zamiast powielać kod, rozszerzanie tworzy wspólny zestaw reguł w skompilowanym CSS.

Selektor zastępczy (poprzedzony symbolem %) definiuje blok stylów, który nigdy nie jest kompilowany samodzielnie — tylko wtedy, gdy zostanie rozszerzony. Nie generuje CSS, dopóki coś go nie rozszerzy.

Rozszerzenie rzeczywistej klasy dodaje cały kontekst jej selektora do skompilowanego wyniku. Selektory zastępcze są bardziej przejrzyste — generują pogrupowane selektory wyłącznie dla selektorów, które je rozszerzają.

Gdy wiele selektorów rozszerza ten sam selektor zastępczy, Sass grupuje je w regułę rozdzielaną przecinkami:

@extend ma istotne ograniczenia:

• Nie można go używać wewnątrz media queries
• Może tworzyć nieoczekiwane, rozbudowane grupy selektorów, gdy występują łańcuchy rozszerzeń
• Utrudnia prześledzenie skompilowanego CSS do plików źródłowych

Porównanie:

• @extend: mniejszy CSS (wspólne reguły), ale złożone łańcuchy selektorów i ograniczenia dotyczące media queries
• @mixin: powiela deklaracje, ale jest bardziej przewidywalny i można go używać wewnątrz media queries

We współczesnym Sass zwykle preferuje się mixiny zamiast @extend. HTTP/2 i kompresja gzip sprawiają, że powielanie deklaracji ma mniejsze znaczenie, a możliwość debugowania mixinów jest ważniejsza niż niewielka różnica w rozmiarze CSS.

@extend (w połączeniu z selektorami zastępczymi) sprawdza się, gdy:

• Wiele selektorów rzeczywiście współdzieli ten sam stan semantyczny (np. stany błędu)
• Kod nie znajduje się wewnątrz media queries
• Style bazowe są stabilne i dobrze zdefiniowane

Selektory zastępcze dobrze sprawdzają się w przypadku zestawów narzędziowych przypominających reset, które są przejmowane przez wiele komponentów:

Niektóre przewodniki stylu i zespoły całkowicie zakazują używania @extend ze względu na jego złożoność i rozrost selektorów, który może powodować. Należy znać kompromisy i przestrzegać konwencji przyjętych w zespole.

@extend umożliwia selektorowi przejęcie stylów innego selektora, grupując selektory w skompilowanym CSS. Selektory zastępcze (%name) nie generują niczego do czasu rozszerzenia — są bardziej przejrzyste niż rozszerzanie rzeczywistych klas. Należy unikać @extend wewnątrz media queries. We współczesnym Sass zwykle preferuje się mixiny zamiast @extend ze względu na ich przewidywalność i łatwiejsze debugowanie.