LESS ичиндеги селекторлордогу өзгөрмөлөр
Өзгөрмөлөрдү селекторлордун ичинде да колдонсо болот.
Бирок, бул үчүн өзгөрмөнү коюунун бир аз башка синтаксисине
ээ болушуңуз керек:
@ белгисинен кийинки өзгөрмөнүн атын
жаатыча кашаанын ичине алуу керек. Келгиле, мисалдар аркылуу карап көрөлү.
Бизде төмөнкү өзгөрмө бар деп коёлу:
@var: div;
Келгиле, бул өзгөрмөнү селекторго коёлу. Ар кандай учурларды карап көрөлү.
Мисал
Өзгөрмөбүздү селектор катарында коёлу:
@{var} {
font-size: 20px;
}
Компиляциянын натыйжасы:
div {
font-size: 20px;
}
Мисал
Эми биздин өзгөрмөбүз селектордун бир бөлүгүн камтыйт деп коёлу:
main @{var} {
font-size: 20px;
}
Компиляциянын натыйжасы:
main div {
font-size: 20px;
}
Мисал
Эми биз өзгөрмөбүздө тегдин аты эмес, анын id
камтылгандыгын айталы. Өзгөрмөнүн атынын алдына решетка белгисин (#) коёлу:
#@{var} {
font-size: 20px;
}
Компиляциянын натыйжасы:
#div {
font-size: 20px;
}
Мисал
Эми биз өзгөрмөбүздө тегдин аты эмес, анын класы бар деп коёлу. Өзгөрмөнүн атынын алдына чекит белгисин (.) коёлу:
.@{var} {
font-size: 20px;
}
Компиляциянын натыйжасы:
.div {
font-size: 20px;
}
Практикалык тапшырмалар
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: ul;
@{var} {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: ul;
div @{var} {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: ul;
div @{var} {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: ul;
@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: list;
.@{var} {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: list;
#@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: list;
.@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: .block;
ul@{var} {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var: a;
@{var}:hover {
text-decoration: none;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
