Zmienne w Sass

Zmienne w Sass to potężne narzędzie, które pozwala na reużywalność wartości w całym twoim arkuszu stylów. Możesz zdefiniować wartość raz, a następnie używać jej w wielu miejscach, co ułatwia utrzymanie kodu i wprowadzanie zmian.

Definiowanie zmiennych

Zmienne w Sass zaczynają się od znaku dolara ($). Możemy przypisać do nich różne wartości, takie jak kolory, długości, procenty, nazwy czcionek, wartości boolean i inne.

Przykład:

1$main-color: #c06;
2$font-stack: Helvetica, sans-serif;
3$base-line-height: 1.5;

Używanie zmiennych

Po zdefiniowaniu zmiennych możemy używać ich w naszych deklaracjach CSS, umieszczając nazwę zmiennej tam, gdzie chcielibyśmy użyć jej wartości.

Przykład:

1body {
2  color: $main-color;
3  font: 100% $font-stack;
4  line-height: $base-line-height;
5}

Zasięg zmiennych

Zmienne w Sass mają zasięg, co oznacza, że są dostępne tylko w obrębie bloku, w którym zostały zdefiniowane. Jeśli zdefiniujesz zmienną na najwyższym poziomie (poza jakimikolwiek selektorami czy regułami), jest ona dostępna globalnie i możesz jej używać w całym arkuszu stylów.

Jeżeli jednak zdefiniujesz zmienną wewnątrz reguły lub selektora, będzie ona dostępna tylko wewnątrz tego bloku.

1$global-color: blue;
2
3.foo {
4  $local-color: green;
5  color: $local-color;  // zielony
6}
7
8.bar {
9  color: $local-color;  // błąd, $local-color nie jest dostępne tutaj
10}

Pamiętaj, że Sass pozwala na nadpisywanie zmiennych. Jeżeli zdefiniujesz zmienną o tej samej nazwie wewnątrz selektora, Sass użyje najnowszej wartości tej zmiennej.

Zmienne w Sass to jedno z najważniejszych narzędzi do utrzymania spójnego i łatwego do zarządzania kodu CSS. Dzięki nim możliwe jest tworzenie bardziej dynamicznych, konfigurowalnych arkuszy stylów.