Zmienne wewnątrz selektorów w LESS
Zmienne można używać również wewnątrz selektorów.
Aby to zrobić, należy jednak użyć
nieco innej składni wstawiania zmiennej:
po @ nazwę zmiennej należy umieścić
w nawiasach klamrowych. Spójrzmy na przykładach.
Załóżmy, że mamy następującą zmienną:
@var: div;
Wstawmy tę zmienną do selektora. Rozważmy różne sytuacje.
Przykład
Wstawmy naszą zmienną jako selektor:
@{var} {
font-size: 20px;
}
Wynik kompilacji:
div {
font-size: 20px;
}
Przykład
Załóżmy teraz, że nasza zmienna zawiera część selektora:
main @{var} {
font-size: 20px;
}
Wynik kompilacji:
main div {
font-size: 20px;
}
Przykład
Załóżmy teraz, że mówimy, że w naszej zmiennej
znajduje się nie nazwa znacznika, a jego id.
Dodajmy kratkę przed nazwą zmiennej:
#@{var} {
font-size: 20px;
}
Wynik kompilacji:
#div {
font-size: 20px;
}
Przykład
Załóżmy teraz, że mówimy, że w naszej zmiennej znajduje się nie nazwa znacznika, a jego klasa. Dodajmy kropkę przed nazwą zmiennej:
.@{var} {
font-size: 20px;
}
Wynik kompilacji:
.div {
font-size: 20px;
}
Zadania praktyczne
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: ul;
@{var} {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: ul;
div @{var} {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: ul;
div @{var} {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: ul;
@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: list;
.@{var} {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: list;
#@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: list;
.@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: .block;
ul@{var} {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var: a;
@{var}:hover {
text-decoration: none;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
