Interpolacja zmiennych
autor: Robert
14 lutego 2015
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.
Zmienna jako selektor
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.
Zmienna jako adres URL
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"); } |
Zmienna jako ścieżka importu
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"; |
Zmienna jako właściwość
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.
