Spremenljivke znotraj selektorjev v LESS
Spremenljivke lahko uporabimo tudi znotraj selektorjev.
Vendar moramo za to uporabiti
nekoliko drugačno sintakso za vstavljanje spremenljivke:
po @ je treba ime spremenljivke vzeti
v zavitih oklepajih. Poglejmo si primere.
Recimo, da imamo naslednjo spremenljivko:
@var: div;
Vstavimo to spremenljivko v selektor. Oglejmo si različne situacije.
Primer
Vstavimo našo spremenljivko kot selektor:
@{var} {
font-size: 20px;
}
Rezultat prevajanja:
div {
font-size: 20px;
}
Primer
Naj zdaj naša spremenljivka vsebuje del selektorja:
main @{var} {
font-size: 20px;
}
Rezultat prevajanja:
main div {
font-size: 20px;
}
Primer
Recimo zdaj, da v naši spremenljivki
ne vsebuje imena oznake, temveč njen id.
Dodajmo lojeno pred imenom spremenljivke:
#@{var} {
font-size: 20px;
}
Rezultat prevajanja:
#div {
font-size: 20px;
}
Primer
Recimo zdaj, da v naši spremenljivki ne vsebuje imena oznake, temveč njen razred. Dodajmo piko pred imenom spremenljivke:
.@{var} {
font-size: 20px;
}
Rezultat prevajanja:
.div {
font-size: 20px;
}
Praktične naloge
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: ul;
@{var} {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: ul;
div @{var} {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: ul;
div @{var} {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: ul;
@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: list;
.@{var} {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: list;
#@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: list;
.@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: .block;
ul@{var} {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var: a;
@{var}:hover {
text-decoration: none;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
