SASS – czyli jak uprzyjemnić sobie pracę z CSSami - Część 2: Trochę praktyki

Większość zaliczeń już mam z głowy, projekt w firmie na ukończeniu także w końcu mam czas, aby skrobnąć część drugą SASSego poradniko-tutoriala. Dziś będzie praktycznie!

Nesting – zagnieżdżanie Jedna z największych zalet SASS, dzięki zagnieżdżaniu pisanie staje się o wiele bardziej intuicyjne, a kod jest bardziej przejrzysty, a przy odpowiednim nazewnictwie pozwala uniknąć niechcianego ostylowania, bez żmudnego dodawania klasy do każdego selektora.

Przykładowy kod: po lewej SCSS, po prawej kod wynikowy CSS.

Ampersand ( & ) znajdujący się w kodzie jest odnośnikiem do rodzica bloku, czyli &:hover jest interpretowane jako tr:hover. Możemy także używać ampersanda, aby wyodrębnić jedynie nadrzędny element z dana klasą, np. w naszym wypadku &.odd oznaczało by wyróżnienie tylko elementów tr.odd.

Zmienne

Zmienne deklarujemy wg schematu: $nazwa: wartość; Przykład:

 $pink: #CE4DD6;
$value: 16px;

.cell{
	padding: $value; /* 16px */
	margin: $value / 2 $value * 2; /* 8px 32px */
	color: $pink; /* CE4DD6 */
}[/code]
Jak widać zasada jest prosta. Dodatkowo na zmiennych jak i zwykłych wartościach można wykonywać różnorakie operacje nie tylko matematyczne:
[code]$white: #fff;

 .black{
	color: invert($white); /* #000 */
}

.gray {
	color: grayscale(#f00); /* #808080 */
}

Funkcji takich jest wiele, część dotyczy kolorów, część zmiennych, część operacji na strongach, a całą ich listę możecie znaleźć w dokumentacji.

Mixiny

Jest to kolejny feature, który skłonił mnie do używania SASS na co dzień. Mixiny to zdefiniowane przez użytkownika bloki atrybutów i wartości, które dzięki nadaniu im nazw stają się bardzo przyjemnymi, reużywalnymi własnościami.

Definiujemy je w następujący sposób:

@mixin nazwaMixina($nieobowiazkowyParametr) {
atrybut: wartość;
atrybut: $nieobowiazkowyParametr;
}

Aby skorzystać z kodu mixina w danym bloku używamy polecenia @include, np.:

@mixin borderRadius($size) {
	-webkit-border-radius: $size;
	-moz-border-radius: $size;
	-o-border-radius: $size;
	border-radius: $size;
}

div.rounded {
	@include borderRadius(20px);
	width: 200px;
}

Jak widać powyżej, mixiny są bardzo podobne w działaniu do funkcji.

Możemy także zagnieżdżać mixiny w sobie, poniżej przedstawiony kod zadziała bez problemu po połączeniu kodem wypisanym wcześniej:

@mixin submitButton {
	@include borderRadius(8px);
	line-height: 30px;
	cursor: pointer;
}

a.submit {
	@includer submitButton;
}

Ciekawa zaletą mixinów jest także to, że możemy swobodnie wkleić plik zawierający predefiniowane mixiny do każdego projektu, ponieważ renderowane są one dopiero w momencie ich użycia w klasie. Dobra praktyka jest raz przygotować sobie taki plik i wraz z biegiem czasu jedynie go powiększać. Przygotowałem dla was mały pliczek z najczęściej używanymi przeze mnie mixinami - do pobrania TUTAJ.

Dziedziczenie po selektorach

Kolejną ciekawą funkcją, którą oferuje SASS jest dziedziczenie po selektorach. Cała zabawa polega na tym, że oprócz dziedziczenia atrybutów dziedziczymy także wszystkie style elementów zagnieżdżonych. Dziedziczenie wywołujemy poprzez polecenie @extend np.:

Na dzień dzisiejszy to tyle. Mam nadzieję ze zaspokoiłem wasza ciekawość i odpowiedziałem na te najbardziej nurtujące pytania. Co w części trzeciej? Czas pokaże, ale ukaże się ona na pewno.

Jeśli macie jakiekolwiek pytania do tej części, możecie swobodnie zadawać je w komentarzach.