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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@kolor-czerwony: #ff0000; @szerokosc-pikselowa: 45px; @wysokosc-procentowa: 90%; p { color: @kolor-czerwony; } div { width: @szerokosc-pikselowa; height: @wysokosc-procentowa; } |
Co po kompilacji do CSS da nam następujący wynik:
|
1 2 3 4 5 6 7 8 |
p { color: #ff0000; } div { width: 90%; height: 45px; } |
