К содержанию

Premenné vo vnútri selektorov v LESS

Premenné je možné použiť aj vo vnútri selektorov. Na to je však potrebné použiť trochu inú syntax vloženia premennej: za @ názov premennej je potrebné vziať do zložených zátvoriek. Pozrime sa na príkladoch. Predpokladajme, že máme nasledujúcu premennú:

styles.less@var: div;

Vložme túto premennú do selektora. Zvážme rôzne situácie.

Príklad

Vložme našu premennú ako selektor:

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

Výsledok kompilácie:

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

Príklad

Predpokladajme teraz, že naša premenná obsahuje časť selektora:

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

Výsledok kompilácie:

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

Príklad

Predpokladajme teraz, že hovoríme, že v našej premennej nie je názov tagu, ale jeho id. Pridajme pred názov premennej mriežku:

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

Výsledok kompilácie:

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

Príklad

Predpokladajme teraz, že hovoríme, že v našej premennej nie je názov tagu, ale jeho trieda. Pridajme pred názov premennej bodku:

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

Výsledok kompilácie:

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

Praktické úlohy

Задание 1

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: ul;

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

Задание 2

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: ul;

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

Задание 3

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: ul;

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

Задание 4

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: ul;

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

Задание 5

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: list;

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

Задание 6

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: list;

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

Задание 7

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: list;

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

Задание 8

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: list;

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

Задание 9

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: list;

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

Задание 10

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: .block;

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

Задание 11

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: .block;

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

Задание 12

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

styles.less@var: a;

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

Задание 13

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

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

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

Задание 14

Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:

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

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