К содержанию

Variáveis dentro de seletores em LESS

As variáveis também podem ser usadas dentro de seletores. No entanto, para isso, é necessário usar uma sintaxe ligeiramente diferente para inserir a variável: após o @, o nome da variável deve ser colocado entre chaves. Vamos ver exemplos. Suponha que temos a seguinte variável:

styles.less@var: div;

Vamos inserir esta variável em um seletor. Consideraremos várias situações.

Exemplo

Vamos inserir nossa variável como um seletor:

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

Resultado da compilação:

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

Exemplo

Suponha que agora nossa variável contenha parte de um seletor:

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

Resultado da compilação:

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

Exemplo

Suponha que agora estamos dizendo que nossa variável contém não o nome da tag, mas seu id. Vamos adicionar um sustenido antes do nome da variável:

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

Resultado da compilação:

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

Exemplo

Suponha que agora estamos dizendo que nossa variável contém não o nome da tag, mas sua classe. Vamos adicionar um ponto antes do nome da variável:

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

Resultado da compilação:

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

Tarefas práticas

Задание 1

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: ul;

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

Задание 2

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: ul;

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

Задание 3

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: ul;

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

Задание 4

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: ul;

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

Задание 5

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: list;

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

Задание 6

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: list;

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

Задание 7

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: list;

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

Задание 8

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: list;

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

Задание 9

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: list;

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

Задание 10

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: .block;

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

Задание 11

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: .block;

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

Задание 12

Explique qual será o resultado da compilação do seguinte código:

styles.less@var: a;

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

Задание 13

Explique qual será o resultado da compilação do seguinte código:

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

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

Задание 14

Explique qual será o resultado da compilação do seguinte código:

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

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