Променливи в селектори в LESS
Променливи могат да се използват и в селектори.
За целта обаче трябва да се използва
малко по-различен синтаксис за вмъкване на променлива:
след @ името на променливата трябва да се постави
в къдрави скоби. Нека да разгледаме примери.
Да предположим, че имаме следната променлива:
@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;
}
