Promenljive unutar selektora u LESS
Promenljive se mogu koristiti i unutar selektora.
Međutim, za to je potrebno koristiti
malo drugačiju sintaksu za ubacivanje promenljive:
nakon @ ime promenljive treba staviti
u vitičaste zagrade. Pogledajmo na primerima.
Neka imamo sledeću promenljivu:
@var: div;
Ubacićemo ovu promenljivu u selektor. Razmotrimo različite situacije.
Primer
Ubacićemo našu promenljivu kao selektor:
@{var} {
font-size: 20px;
}
Rezultat kompilacije:
div {
font-size: 20px;
}
Primer
Neka sada naša promenljiva sadrži deo selektora:
main @{var} {
font-size: 20px;
}
Rezultat kompilacije:
main div {
font-size: 20px;
}
Primer
Neka sada kažemo da u našoj promenljivoj
ne sadrži ime taga, već njegov id.
Dodajmo tarabu ispred imena promenljive:
#@{var} {
font-size: 20px;
}
Rezultat kompilacije:
#div {
font-size: 20px;
}
Primer
Neka sada kažemo da u našoj promenljivoj ne sadrži ime taga, već njegovu klasu. Dodajmo tačku ispred imena promenljive:
.@{var} {
font-size: 20px;
}
Rezultat kompilacije:
.div {
font-size: 20px;
}
Praktični zadaci
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: ul;
@{var} {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: ul;
div @{var} {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: ul;
div @{var} {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: ul;
@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: list;
.@{var} {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: list;
#@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: list;
.@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: .block;
ul@{var} {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var: a;
@{var}:hover {
text-decoration: none;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
