К содержанию

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ą:

styles.less@var: div;

Wstawmy tę zmienną do selektora. Rozważmy różne sytuacje.

Przykład

Wstawmy naszą zmienną jako selektor:

styles.less@{var} {
  font-size: 20px;
}

Wynik kompilacji:

styles.cssdiv {
  font-size: 20px;
}

Przykład

Załóżmy teraz, że nasza zmienna zawiera część selektora:

styles.lessmain @{var} {
  font-size: 20px;
}

Wynik kompilacji:

styles.cssmain 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:

styles.less#@{var} {
  font-size: 20px;
}

Wynik kompilacji:

styles.css#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:

styles.less.@{var} {
  font-size: 20px;
}

Wynik kompilacji:

styles.css.div {
  font-size: 20px;
}

Zadania praktyczne

Задание 1

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Opowiedz, jaki będzie wynik kompilacji następującego kodu:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}