autor: Robert
Zmienne w LESSie nie służą wyłącznie do nadawania im wartości właściwości, możemy równie dobrze użyć zmiennej do nazwania diva, podać w niej ścieżkę np. do obrazu lub importowanego pliku bądź możemy nadać zmiennej nazwę właściwości.
Tworzymy sobie zmienną, która jest nazwą klasy naszego diva czyli przykładowo @naszSelektor: jakiśDiv;
. Aby wykorzystać tą zmienną w kodzie a zatem aby jej wartość została podstawiona w wyznaczone przez nas miejsce, musimy otoczyć ją nawiasami klamrowymi @{naszSelektor}
.
1 2 3 4 5 6 7 8 9 |
// Zmienna @naszSelektor: jakisDiv; // Użycie border: 1px solid #ff00ff; background-color: yellow; margin: 0 auto; } |
Co skompiluje się nam do postaci:
1 2 3 4 5 |
.jakisDiv { border: 1px solid #ff00ff; background-color: yellow; margin: 0 auto; } |
Jak widzicie, wewnątrz nawiasów klamrowych została pobrana wartość zmiennej i powstał nam selektor klasy CSS .jakisDiv
.
Zwykle struktura naszego projektu posiada wydzielony folder przeznaczony na obrazy. Za każdym razem gdy chcemy się do niego odwoływać, musimy wpisać całą ścieżkę dostępową. Zastosujmy więc zmienną by przechowywała naszą ścieżkę. Tutaj również korzystamy z nawiasów klamrowych.
1 2 3 4 5 6 7 8 |
// zmienna @sciezkaDoObrazka: "../img"; // Użycie body { color: #444; background: url("@{sciezkaDoObrazka}/bg-img.png"); } |
Po kompilacji otrzymamy:
1 2 3 4 |
body { color: #444; background: url("../img/bg-img.png"); } |
Podobnie jak w poprzednim przykładzie, jeśli chcemy importować sobie pliki z innych folderów możemy użyć zmiennej wewnątrz instrukcji @import
. Oczywiście tutaj również skorzystamy z zapisu @{nazwaZmiennej}
.
1 2 3 4 5 |
// Zmienna @fonty: "../../src/fonts"; // użycie @import "@{fonty}/OpenSans.ttf"; |
Wiemy już, że do zmiennej możemy przypisać wartość właściwości, nazwę selektora oraz ścieżki. Jak się już pewnie domyślacie, zmienna może również wskazywać na właściwość. Myślę, że przykład wyjaśni wszystko.
1 2 3 4 5 6 |
Co skompiluje się do postaci:
1 2 3 4 |
.widget { color: #0ee; background-color: #999; } |
Zauważcie, że w przypadku zapisu [email protected]{wlasciwosc}
po myślniku została podstawiona wartość zmiennej i doszło do „sklejenia” zapisu co docelowo dało nam background-color
.