К содержанию

Variabile în interiorul selectorilor în LESS

Variabilele pot fi folosite și în interiorul selectorilor. Pentru aceasta, totuși, trebuie să folosiți o sintaxă ușor diferită pentru inserarea variabilei: după @ numele variabilei trebuie să fie pus între acolade. Să vedem câteva exemple. Să presupunem că avem următoarea variabilă:

styles.less@var: div;

Să efectuăm inserarea acestei variabile în selector. Să analizăm diverse situații.

Exemplul

Să efectuăm inserarea variabilei noastre ca selector:

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

Rezultatul compilării:

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

Exemplul

Să presupunem acum că variabila noastră conține o parte a selectorului:

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

Rezultatul compilării:

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

Exemplul

Să presupunem acum că spunem că în variabila noastră nu se află numele tag-ului, ci id-ul său. Să adăugăm în fața numelui variabilei diez:

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

Rezultatul compilării:

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

Exemplul

Să presupunem acum că spunem că în variabila noastră nu se află numele tag-ului, ci clasa sa. Să adăugăm în fața numelui variabilei un punct:

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

Rezultatul compilării:

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

Sarcini practice

Задание 1

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: ul;

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

Задание 2

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: ul;

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

Задание 3

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: ul;

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

Задание 4

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: ul;

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

Задание 5

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: list;

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

Задание 6

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: list;

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

Задание 7

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: list;

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

Задание 8

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: list;

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

Задание 9

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: list;

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

Задание 10

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: .block;

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

Задание 11

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: .block;

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

Задание 12

Spuneți care va fi rezultatul compilării următorului cod:

styles.less@var: a;

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

Задание 13

Spuneți care va fi rezultatul compilării următorului cod:

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

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

Задание 14

Spuneți care va fi rezultatul compilării următorului cod:

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

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