Variabla brenda selektorëve në LESS
Variablat mund të përdoren edhe brenda selektorëve.
Sidoqoftë, për këtë duhet të përdorni
një sintaksë paksa të ndryshme të futjes së variablës:
pas @ emri i variablës duhet të vendoset
në kllapa kaçurrelë. Le të shohim me shembuj.
Le të themi se kemi variablin e mëposhtëm:
@var: div;
Le të kryejmë futjen e kësaj variable në selektor. Le të shqyrtojmë situata të ndryshme.
Shembull
Le të kryejmë futjen e variablës sonë si selektor:
@{var} {
font-size: 20px;
}
Rezultati i kompilimit:
div {
font-size: 20px;
}
Shembull
Le të themi tani se variabla jonë përmban një pjesë të selektorit:
main @{var} {
font-size: 20px;
}
Rezultati i kompilimit:
main div {
font-size: 20px;
}
Shembull
Le të themi tani se themi se në variablin tonë
përmbahet jo emri i tag-ut, por id i tij.
Le të shtojmë një simbol diez para emrit të variablës:
#@{var} {
font-size: 20px;
}
Rezultati i kompilimit:
#div {
font-size: 20px;
}
Shembull
Le të themi tani se themi se në variablin tonë përmbahet jo emri i tag-ut, por klasa e tij. Le të shtojmë një pikë para emrit të variablës:
.@{var} {
font-size: 20px;
}
Rezultati i kompilimit:
.div {
font-size: 20px;
}
Detyra praktike
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: ul;
@{var} {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: ul;
div @{var} {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: ul;
div @{var} {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: ul;
@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: list;
.@{var} {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: list;
#@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: list;
.@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: .block;
ul@{var} {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var: a;
@{var}:hover {
text-decoration: none;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Tregoni, cili do të jetë rezultati i kompilimit të kodit të mëposhtëm:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
