Переменные можно использовать и внутри селекторов.
Для этого, однако, нужно воспользоваться
немного другим синтаксисом вставки переменной:
после @ имя переменной нужно взять
в фигурные скобки. Давайте посмотрим на примерах.
Пусть у нас есть следующая переменная:
@var: div;
Давайте выполним вставку этой переменной в селектор. Рассмотрим различные ситуации.
Пример
Выполним вставку нашей переменной в качестве селектора:
@{var} {
font-size: 20px;
}
Результат компиляции:
div {
font-size: 20px;
}
Пример
Пусть теперь наша переменная содержит часть селектора:
main @{var} {
font-size: 20px;
}
Результат компиляции:
main div {
font-size: 20px;
}
Пример
Пусть теперь мы говорим, что в нашей переменной
содержится не имя тега, а его id.
Добавим перед именем переменной решетку:
#@{var} {
font-size: 20px;
}
Результат компиляции:
#div {
font-size: 20px;
}
Пример
Пусть теперь мы говорим, что в нашей переменной содержится не имя тега, а его класс. Добавим перед именем переменной точку:
.@{var} {
font-size: 20px;
}
Результат компиляции:
.div {
font-size: 20px;
}
Практические задачи
Расскажите, каким будет результат компиляции следующего кода:
@var: ul;
@{var} {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: ul;
div @{var} {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: ul;
div @{var} {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: ul;
@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: list;
.@{var} {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: list;
#@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: list;
.@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: .block;
ul@{var} {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Расскажите, каким будет результат компиляции следующего кода:
@var: a;
@{var}:hover {
text-decoration: none;
}
Расскажите, каким будет результат компиляции следующего кода:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Расскажите, каким будет результат компиляции следующего кода:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}