Muuttujat selektoreiden sisällä LESS:ssä
Muuttujia voidaan käyttää myös selektoreiden sisällä.
Tätä varten on kuitenkin käytettävä
hieman erilaista muuttujan lisäys syntaksia:
@-merkin jälkeen muuttujan nimi on otettava
aaltosulkeisiin. Katsotaanpa esimerkein.
Oletetaan, että meillä on seuraava muuttuja:
@var: div;
Lisätään tämä muuttuja selektoriin. Tarkastellaan erilaisia tilanteita.
Esimerkki
Tehdään muuttujamme lisäys selektorina:
@{var} {
font-size: 20px;
}
Kääntämisen tulos:
div {
font-size: 20px;
}
Esimerkki
Oletetaan nyt, että muuttujamme sisältää osan selektorista:
main @{var} {
font-size: 20px;
}
Kääntämisen tulos:
main div {
font-size: 20px;
}
Esimerkki
Oletetaan nyt, että sanomme, että muuttujassamme
ei sisällä tagin nimeä, vaan sen id:n.
Lisätään muuttujan nimen eteen risuaita:
#@{var} {
font-size: 20px;
}
Kääntämisen tulos:
#div {
font-size: 20px;
}
Esimerkki
Oletetaan nyt, että sanomme, että muuttujassamme ei sisällä tagin nimeä, vaan sen luokan. Lisätään muuttujan nimen eteen piste:
.@{var} {
font-size: 20px;
}
Kääntämisen tulos:
.div {
font-size: 20px;
}
Käytännön tehtävät
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: ul;
@{var} {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: ul;
div @{var} {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: ul;
div @{var} {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: ul;
@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: list;
.@{var} {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: list;
#@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: list;
.@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: .block;
ul@{var} {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var: a;
@{var}:hover {
text-decoration: none;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
