Тағйирёбандаҳо дар дохили интихобкунандаҳо дар LESS
Тағйирёбандаҳоро метавон дар дохили интиххобкунандаҳо истифода бурд.
Барои ин, аммо, бояд синтаксиси каме дигари гузоштани тағйирёбандаро истифода бурд:
пас аз @ номи тағйирёбанда бояд
дар қафаси каҷӣ гирифта шавад. Биёед дар мисолҳо назар кунем.
Бигзор мо тағйирёбандаи зеринро дошта бошем:
styles.less@var: div;
Биёед ин тағйирёбандаро дар интихобкунанда гузорем. Вазияҳои гуногунро дида мебароем.
Мисол
Тағйирёбандаи худро ба унвони интихобкунанда мегузорем:
styles.less@{var} {
font-size: 20px;
}
Натиҷаи компилятсия:
styles.cssdiv {
font-size: 20px;
}
Мисол
Акнун тағйирёбандаи мо қисми интихобкунандаро дар бар гирад:
styles.lessmain @{var} {
font-size: 20px;
}
Натиҷаи компилятсия:
styles.cssmain div {
font-size: 20px;
}
Мисол
Акнун мегӯем, ки дар тағйирёбандаи мо
номи тег нест, балки id-и он мавҷуд аст.
Пеш аз номи тағйирёбанда аломати # мегузорем:
styles.less#@{var} {
font-size: 20px;
}
Натиҷаи компилятсия:
styles.css#div {
font-size: 20px;
}
Мисол
Акнун мегӯем, ки дар тағйирёбандаи мо номи тег нест, балки синфи он мавҷуд аст. Пеш аз номи тағйирёбанда нуқта мегузорем:
styles.less.@{var} {
font-size: 20px;
}
Натиҷаи компилятсия:
styles.css.div {
font-size: 20px;
}
Масъалаҳои амалӣ
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: ul;
@{var} {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: ul;
div @{var} {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: ul;
div @{var} {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: ul;
@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: list;
.@{var} {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: list;
#@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: list;
.@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: list;
ul.@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: list;
ul.@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: .block;
ul@{var} {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: .block;
ul@{var} li {
font-size: 20px;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var: a;
@{var}:hover {
text-decoration: none;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Натиҷаи компилятсияи коди зерин чист:
styles.less@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}