LESS tutorial logo

Zmienne

autor: Robert

28 stycznia 2015

Każdy z Was, kto miał jakąś styczność z programowaniem zapewne wie czym są zmienne i do czego służą. Pozwólcie, że wyjaśnię tym, którzy dopiero zaczynają swoją przygodę.

Zmienna jest takim elementem, który pozwala przypisać sobie jakąś wartość a następnie odwoływać się do siebie wewnątrz kodu.

Przykładowo liczba  π w przybliżeniu ma wartość 3,14159. Wyobraźmy sobie, że piszemy program, który używa jej w kilku/kilkunastu miejscach. Zamiast wszędzie wpisywać 3,14159 tworzymy sobie zmienną var pi = 3,14159 i zamiast w naszym kodzie wpisywać obwodKola = 2 * 3,14159 * r wystarczy zapisać obwodKola = 2 * pi * r.

Zmienne w LESS służą dokładnie temu samemu, możemy przypisać im wartość koloru, szerokość w pikselach czy procentach, rozmiar fonta itp.

Deklaracja i inicjalizacja zmiennej czyli nadanie jej nazwy i wartości w LESS wygląda następująco:

@nazwa-zmiennej: wartość_zmiennej;

Poniżej przykład deklaracji kilku zmiennych i odwołanie się do nich:

Co po kompilacji do CSS da nam następujący wynik:


uve 12 maja 2015 o 12:03

div {
width: 45px;
height: 90%;
}

Odpowiedz