Zmienne

Jeśli znasz jakikolwiek język programowania, to już prawdopodobnie wiesz czym są zmienne. Jeśli jednak jeszcze się z nimi nie spotkałeś, to wyobraź sobie je jako pudełko, do którego możesz coś włożyć i w nim przechować (na razie) dowolną zawartość. Może ona zostać wyciągnięta przez kogoś innego i wykorzystana w innym miejscu. Tak samo jest ze zmienną. Jest to przechowalnia zawierająca informację, która może być wykorzystywana wielokrotnie i przez różne “podmioty”. Prosty przykład:

Pierwsza linijka powyższego kodu to tzw. deklaracja zmiennej, czyli utworzenie jej, nazwanie i nadanie wartości. W SASSie deklarujemy zmienne poprzez symbol dolara -$. W powyższym przykładzie definiujemy zmienną o nazwieheader-font-sizei wartości16px.

Każdą linijkę w której zapisujemy paręwłaściwość:wartość, podobnie jak w CSSie kończymy znakiem średnika -;. Można od tego stosować pewien wyjątek, ale osobiście nie zalecam tego typu praktyki.

Powyższa zmienna może zostać wykorzystana oczywiście wielokrotnie. Przydaje się to np. w przypadku przechowywania w zmiennych kolorów wykorzystywanych na stronie. Przykład:

Oczywiście samą zmienną można też wielokrotnie nadpisywać, co przydaje się np. w pętlach o których będzie mowa w jednej z kolejnych lekcji.

Zadanie 1

W tym zadaniu Twoim celem jest zmiana koloru na czerwony dla widocznego w oknie tekstu. Spróbuj zrobić to wprowadzając prostą zmienną do kodu.

$red

:
#f00
;
p
{
color
:
$
red
;
}

Zasięg zmiennych

W SASSie istnieje pojęcie zasięgu zmiennej, chociaż bardzo rzadko się go używa. Na razie jako początkujący powinieneś znać jedną podstawową zasadę. Zmienne najlepiej jest definiować w osobnym pliku jako zmienne globalne. Przykład:

Nie jest to dobra praktyka w jakimkolwiek języku programowania, ale umówmy się, SASS nie jest językiem programowania. Tutaj nie jest nam potrzebny podział na zmienne prywatne i publiczne. Nie dbamy też o żadne bezpieczeństwo, bo to są tylko style. W dodatku kompilujemy je na naszym komputerze, a na serwerze powinien znaleźć się tylko plik wynikowy.

Typy danych

W zmiennych można przechowywać tylko określone typy danych. W SASS występuje 7 typów zmiennych:

• liczby
  • np 1 , 2 , 10px ;
• ciągi znaków - “foo” , ‘bar’ , foo
  • wszystkie formy zapisu są poprawne i akceptowane przez SASS;
• kolory - blue , #0000FF , rgb(0, 0, 255)
  • kolory mogą zostać zapisane pod każdą postacią jaką akceptuje CSS;
• wartości prawda / fałsz - true , false
  • wykorzystywane są one w operacjach warunkowych;
• wartość null ;
• lista wartości - 10px 0 0 5px , “Roboto”, sans-serif ;
• mapy - key1:value1, key2: value2
  • są mniej więcej odpowiednikiem obiektów z JavaScriptu, czyli zmienną posiadającą pary klucz: wartość ;

Do wszystkich zmiennych które są interpretowane przez SASS możesz oczywiście dopisać!important, choć wiemy oczywiście, że nie jest to dobrze widziane w stylowaniu strony.

Do zmiennej możesz również zapisać wynik działania wbudowanej funkcji, które już niedługo będziesz miał okazję poznać.

Podsumowanie

W tej lekcji dowiedziałeś się co to jest zmienna i jak jej używać w SASSie. Wiesz już jakie typy danych możesz przypisać do zmiennej i potrafisz wielokrotnie wykorzystać pojedynczą zmienną.