Muutujad selektorite sees LESS-is
Muutujaid saab kasutada ka selektorite sees.
Selleks tuleb aga kasutada
veidi teistsugust muutuja sisestamise süntaksit:
pärast @ tuleb muutuja nimi võtta
lookulgesse. Vaatame näidete varal.
Oletame, et meil on järgmine muutuja:
@var: div;
Proovime seda muutujat sisestada selektorisse. Vaatleme erinevaid olukordi.
Näide
Sisestame oma muutuja selektorina:
@{var} {
font-size: 20px;
}
Kompileerimise tulemus:
div {
font-size: 20px;
}
Näide
Oletame nüüd, et meie muutuja sisaldab osa selektorist:
main @{var} {
font-size: 20px;
}
Kompileerimise tulemus:
main div {
font-size: 20px;
}
Näide
Oletame nüüd, et me ütleme, et meie muutujas
sisaldub mitte silti nimi, vaid selle id.
Lisame muutuja nime ettre noobi:
#@{var} {
font-size: 20px;
}
Kompileerimise tulemus:
#div {
font-size: 20px;
}
Näide
Oletame nüüd, et me ütleme, et meie muutujas sisaldub mitte silti nimi, vaid selle klass. Lisame muutuja nime ettre punkti:
.@{var} {
font-size: 20px;
}
Kompileerimise tulemus:
.div {
font-size: 20px;
}
Praktilised ülesanded
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: ul;
@{var} {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: ul;
div @{var} {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: ul;
div @{var} {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: ul;
@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: list;
.@{var} {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: list;
#@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: list;
.@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: .block;
ul@{var} {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var: a;
@{var}:hover {
text-decoration: none;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Kirjelda, milline on järgmise koodi kompileerimise tulemus:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
