Променливи во рамки на селектори во 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;
}
