Rozszerzanie klas
Oprócz zagnieżdżania i mixinów istnieje jeszcze jeden sposób na poprawienie czytelności kodu. Nie jest on tak popularny jak dwa przedstawione poprzednio, ale warto o nim wspomnieć. W SASS istnieje pojęcie rozszerzania klas. Zobacz na czym ono polega.
Podstawy
Technika ta polega na definiowaniu podstawowej klasy dla danego elementu, aby później rozszerzyć ją w przypadku innego stanu. Dla przykładu:
| 123456789 | .error{border:1px#f00;background-color:#fdd;}.bad-error{@extend.error;border-width:3px;} |
|---|---|
Powyższy kod zostanie skompilowany do:
| 12345678 | .error,.bad-error{border:1px#f00;background-color:#fdd;}.bad-error{border-width:3px;} |
|---|---|
Dokładnie taki sam rezultat możemy osiągnąć poprzez zagnieżdżanie styli i użycie operatora rodzica&w ten sposób:
| 12345678 | .error{border:1px#f00;background-color:#fdd;&.bad-error{border-width:3px;}} |
|---|---|
Bardziej przydatne zastosowanie @extends
Jednak istnieją przypadki w których zasadne jest użycie słowa kluczowego@extends. Wyobraź sobie, że masz kilka klas dla różnych elementówa. Dzięki rozszerzeniu klas, możesz dla wszystkicha:hoverustawić efekt po najechaniu kursorem myszy na link. Przykład:
| 1 2 3 4 5 6 7 8 910111213 | a.link-1{color:#f00;@extenda:hover;}a.link-2{color:#f0f;@extenda:hover;}a:hover{text-decoration:underline;} |
|---|---|
Oczywiście ten sam efekt możesz uzyskać w inny sposób, rozszerzanie klas jest jedną z opcji.
Zadanie 1
W ciele dokumentu HTML znajdują się dwa elementy.circle. Jeden z elementów posiada także klasęcircle-blue, ale ona nie posiada w zapisie niebieskiego koloru tła. W kodzie SCSS istnieje natomiast klasablue, w której istnieje poprawny zapis koloru tła. Twoim zadaniem jest rozszerzenie klasycircle-blueo klasęblue.
Podsumowanie
W tej krótkiej lekcji dowiedziałeś się czym jest rozszerzanie klas i kiedy warto je stosować. Poznałeś również inną wersję zapisu wykorzystującą zagnieżdżanie klas. Zapraszam Cię do następnej lekcji w której poznasz operacje warunkowe i pętle