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:
@var: div;
Vamos inserir esta variável em um seletor. Consideraremos várias situações.
Exemplo
Vamos inserir nossa variável como um seletor:
@{var} {
font-size: 20px;
}
Resultado da compilação:
div {
font-size: 20px;
}
Exemplo
Suponha que agora nossa variável contenha parte de um seletor:
main @{var} {
font-size: 20px;
}
Resultado da compilação:
main 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:
#@{var} {
font-size: 20px;
}
Resultado da compilação:
#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:
.@{var} {
font-size: 20px;
}
Resultado da compilação:
.div {
font-size: 20px;
}
Tarefas práticas
Explique qual será o resultado da compilação do seguinte código:
@var: ul;
@{var} {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: ul;
div @{var} {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: ul;
div @{var} {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: ul;
@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: list;
.@{var} {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: list;
#@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: list;
.@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: .block;
ul@{var} {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Explique qual será o resultado da compilação do seguinte código:
@var: a;
@{var}:hover {
text-decoration: none;
}
Explique qual será o resultado da compilação do seguinte código:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Explique qual será o resultado da compilação do seguinte código:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
