Kintamieji selektoriuose LESS
Kintamuosius galima naudoti ir selektoriuose.
Tačiau tam reikia naudoti
šiek tiek kitokį kintamojo įterpimo sintaksę:
po @ kintamojo pavadinimą reikia paimti
į riestinius skliaustus. Pažiūrėkime į pavyzdžius.
Tarkime, kad turime šį kintamąjį:
@var: div;
Įterpkime šį kintamąjį į selektorių. Panagrinėkime įvairias situacijas.
Pavyzdys
Įterpkime savo kintamąjį kaip selektorių:
@{var} {
font-size: 20px;
}
Kompiliavimo rezultatas:
div {
font-size: 20px;
}
Pavyzdys
Tarkime, kad dabar mūsų kintamajame yra dalis selektoriaus:
main @{var} {
font-size: 20px;
}
Kompiliavimo rezultatas:
main div {
font-size: 20px;
}
Pavyzdys
Tarkime, kad dabar mes sakome, kad mūsų kintamajame
yra ne žymos pavadinimas, o jos id.
Prieš kintamojo pavadinimą pridėkime grotelę:
#@{var} {
font-size: 20px;
}
Kompiliavimo rezultatas:
#div {
font-size: 20px;
}
Pavyzdys
Tarkime, kad dabar mes sakome, kad mūsų kintamajame yra ne žymos pavadinimas, o jos klasė. Pridėkime prieš kintamojo pavadinimą tašką:
.@{var} {
font-size: 20px;
}
Kompiliavimo rezultatas:
.div {
font-size: 20px;
}
Praktinės užduotys
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: ul;
@{var} {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: ul;
div @{var} {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: ul;
div @{var} {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: ul;
@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: list;
.@{var} {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: list;
#@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: list;
.@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: .block;
ul@{var} {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var: a;
@{var}:hover {
text-decoration: none;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
