Változók szelektorokon belül LESS-ben
A változókat szelektorokon belül is használhatjuk.
Ehhez azonban egy kicsit más szintaxist kell használni
a változó beillesztéséhez:
a @ jel után a változó nevét kapcsos zárójelekbe
kell tenni. Nézzük meg példákon keresztül.
Tegyük fel, hogy a következő változónk van:
@var: div;
Illesszük be ezt a változót a szelektorba. Vizsgáljunk meg különböző helyzeteket.
Példa
Illesszük be a változónkat szelektorként:
@{var} {
font-size: 20px;
}
A fordítás eredménye:
div {
font-size: 20px;
}
Példa
Tegyük fel, hogy most a változónk egy részt tartalmaz a szelektornak:
main @{var} {
font-size: 20px;
}
A fordítás eredménye:
main div {
font-size: 20px;
}
Példa
Tegyük fel, hogy most azt mondjuk, hogy a változónkban
nem a tag neve, hanem a id-ja található.
Adjunk meg egy kettős kereszteket a változó neve elé:
#@{var} {
font-size: 20px;
}
A fordítás eredménye:
#div {
font-size: 20px;
}
Példa
Tegyük fel, hogy most azt mondjuk, hogy a változónkban nem a tag neve, hanem az osztálya található. Adjunk egy pontot a változó neve elé:
.@{var} {
font-size: 20px;
}
A fordítás eredménye:
.div {
font-size: 20px;
}
Gyakorlati feladatok
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: ul;
@{var} {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: ul;
div @{var} {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: ul;
div @{var} {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: ul;
@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: list;
.@{var} {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: list;
#@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: list;
.@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: .block;
ul@{var} {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var: a;
@{var}:hover {
text-decoration: none;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Mondja el, mi lesz a fordítás eredménye a következő kódnak:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
