К содержанию

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;
}

Практикалык тапшырмалар

Задание 1

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Төмөнкү коддун компиляция натыйжасы кандай болорун айтып бериңиз:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}