Vigezo ndani ya vibaguzi katika LESS
Vigezo vinaweza kutumika pia ndani ya vibaguzi.
Hata hivyo, kwa kufanya hivyo, unahitaji kutumia
sintaksia tofauti kidyo ya kuingiza kigezo:
baada ya @ jina la kigezo linahitaji kuzingirwa
kwa mabano ya curly. Hebu tuangalie kwa mifano.
Wacha tuchukulie tuna kigezo kifuatacho:
@var: div;
Wacha tuingize kigezo hiki ndani ya kibaguzi. Hebu tuchunguze hali mbalimbali.
Mfano
Wacha tuingize kigezo chetu kama kibaguzi:
@{var} {
font-size: 20px;
}
Matokeo ya ukusanyaji:
div {
font-size: 20px;
}
Mfano
Wacha sasa kigezo chetu kikibebea sehemu ya kibaguzi:
main @{var} {
font-size: 20px;
}
Matokeo ya ukusanyaji:
main div {
font-size: 20px;
}
Mfano
Wacha sasa tuseme kwamba katika kigezo chetu
hakimo jina la kitambulisho (tag), bali ni id yake.
Wacha tuongeze alama ya sauti mbele ya jina la kigezo:
#@{var} {
font-size: 20px;
}
Matokeo ya ukusanyaji:
#div {
font-size: 20px;
}
Mfano
Wacha sasa tuseme kwamba katika kigezo chetu hakimo jina la kitambulisho (tag), bali ni darasa lake. Wacha tuongeze doti mbele ya jina la kigezo:
.@{var} {
font-size: 20px;
}
Matokeo ya ukusanyaji:
.div {
font-size: 20px;
}
Kazi za Vitendo
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: ul;
@{var} {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: ul;
div @{var} {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: ul;
div @{var} {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: ul;
@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: list;
.@{var} {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: list;
#@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: list;
.@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: .block;
ul@{var} {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var: a;
@{var}:hover {
text-decoration: none;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Eleza, matokeo ya ukusanyaji yatakuwa nini kwa kifuatacho cha msimbo:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
