LESS tutorial logo

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}.

Co skompiluje się nam do postaci:

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.

Po kompilacji otrzymamy:

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}.

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.

Co skompiluje się do postaci:

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.


Komentarze: Bądź pierwszy!