Zmienne stanowią nieodłączny element języków programowania. Pozwalają na wielokrotne użycie pewnych wartości bez konieczności kopiowania ich.
Preprocesor Sass również oferuje możliwość operowania na zmiennych.
Jest to rzecz, która jest powszechnie znana i wykorzystywana przez programistów, którzy chcą pisać kod warstwy wizualnej zgodnie z zasadą DRY (ang. Don’t Repeat Yourself).
Dzięki zastosowaniu zmiennych praca z preprocesorem Sass jest bardzo szybka
i przyjemna, a kod może być z łatwością rozwijany i modyfikowany.
Wyobraźmy sobie sytuację, w której chcemy zmienić motyw kolorystyczny szablonu strony. Dzięki zastosowaniu zmiennych, nie będzie to żmudne zajęcie zmiany wartości w wielu miejscach w kodzie.
Podstawowe informacje
Deklaracja zmiennej w Sass wygląda następująco:
$nazwa: wartość;Zmienne w preprocesorze Sass mogą okazać się bardzo przydatne w momencie, kiedy chcemy przechować informacje dotyczące między innymi:
– wartości liczbowej jakiejś własności elementu (na przykład wysokość, margines),
– kolorów,
– wartości tekstowych,
– wartości logicznych.
Przykład użycia zmiennej w kodzie:
$black: #000;
.box {
border-color: $black;
}
Warto pamiętać o tym, aby w nazwach zmiennych nie stosować znaków specjalnych, ponieważ poskutkuje to błędem kompilacji.
Dobrą praktyką jest, aby deklarowane zmienne posiadały znaczenie semantyczne. Dzięki temu kod będzie czytelniejszy i łatwiejszy w modyfikacji.
Zasięg zmiennych
Zasięg zmiennych jest kwestią znaną z języków programowania. W prostych słowach można powiedzieć, że zasięg zmiennej oznacza obszar, w jakim dana zmienna jest widoczna a co za tym idzie – może zostać wykorzystana.
Zmienne możemy podzielić na globalne – czyli takie, które definiujemy poza jakąkolwiek deklaracją, dzięki czemu możemy ich użyć w dowolnym miejscu w kodzie a także te o zasięgu lokalnym, które definiujemy w obrębie deklaracji CSS. Dostęp to tych zmiennych można uzyskać jedynie w obrębie bloku, w którym zostały zadeklarowane.
W przypadku, gdy chcemy, aby zmienna, której używamy w obrębie pewnej deklaracji była dostępna także poza nią, wówczas możemy zastosować flagę !global.
Należy pamiętać, że flaga !global nadpisuje wartości zmiennych globalnych.
Przykład użycia flagi !global:
$border-color: #fff;
.box {
border-color: $border-color;
}
.box--local {
$border-color: #d3d3d3;
border-color: $border-color;
}
.box--global {
$border-color: #000 !global;
border-color: $border-color;
}Nasz kod wynikowy będzie wyglądał następująco:
.box {
border-color: #fff;
}
.box--local {
border-color: #d3d3d3;
}
.box--global {
border-color: #000;
}Definiowanie wartości domyślnej
Preprocesor Sass umożliwia określenie wartości domyślnej dla zadeklarowanej zmiennej. Flaga !default może być bardzo przydatna w momencie, gdy wartość zmiennej nie została określona, lub wartość to null. Dzięki zastosowaniu tej flagi zmienna zwróci przypisaną do niej wartość domyślną.
Przykład użycia flagi !default:
$border-color: #000 !default;Przydatne funkcje
Preprocesor Sass oferuje kilka funkcji, które ułatwiają pracę ze zmiennymi, szczególnie przy bardziej rozbudowanych projektach.
variable-exists(nazwa-zmiennej);Funkcja ta pozwala na sprawdzenie, czy istnieje zmienna o podanej nazwie.
global-variable-exists(nazwa-zmiennej);Dzięki tej funkcji możemy sprawdzić, czy istnieje zmienna globalna o podanej nazwie.
Do dzieła!
Praca z użyciem zmiennych w preprocesorze Sass znacząco ułatwia pracę z arkuszami stylów – kod może być z łatwością modyfikowany i rozwijany. Jest to jedna z podstawowych zalet stosowania Sass w projekcie.
Warto wspomnieć o tym, że zmienne mogą być również używane w kodzie CSS.
Podstawowe informacje na temat różnic między stosowaniem zmiennych w CSS a w preprocesorze Sass można znaleźć tutaj.
Follow
