К содержанию

Proměnné uvnitř selektorů v LESS

Proměnné lze použít i uvnitř selektorů. K tomu je však potřeba použít trochu jinou syntaxi vložení proměnné: za @ je třeba vzít název proměnné do složených závorek. Podívejme se na příkladech. Předpokládejme, že máme následující proměnnou:

styles.less@var: div;

Pojďme vložit tuto proměnnou do selektoru. Zvažme různé situace.

Příklad

Vložme naši proměnnou jako selektor:

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

Výsledek kompilace:

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

Příklad

Nyní předpokládejme, že naše proměnná obsahuje část selektoru:

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

Výsledek kompilace:

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

Příklad

Nyní předpokládejme, že říkáme, že v naší proměnné není obsažen název tagu, ale jeho id. Přidejme před název proměnné mřížku:

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

Výsledek kompilace:

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

Příklad

Nyní předpokládejme, že říkáme, že v naší proměnné není obsažen název tagu, ale jeho třída. Přidejme před název proměnné tečku:

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

Výsledek kompilace:

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

Praktické úlohy

Задание 1

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: ul;

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

Задание 2

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: ul;

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

Задание 3

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: ul;

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

Задание 4

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: ul;

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

Задание 5

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: list;

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

Задание 6

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: list;

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

Задание 7

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: list;

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

Задание 8

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: list;

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

Задание 9

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: list;

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

Задание 10

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: .block;

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

Задание 11

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: .block;

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

Задание 12

Řekněte, jaký bude výsledek kompilace následujícího kódu:

styles.less@var: a;

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

Задание 13

Řekněte, jaký bude výsledek kompilace následujícího kódu:

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

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

Задание 14

Řekněte, jaký bude výsledek kompilace následujícího kódu:

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

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