К содержанию

LESS dagi selektorlar ichidagi o'zgaruvchilar

O'zgaruvchilarni selektorlar ichida ham ishlatish mumkin. Buning uchun, biroq, o'zgaruvchini kiritishning boshqa sintaksisidan foydalanish kerak: @ dan keyin o'zgaruvchi nomi jingalak qavs ichiga olinishi kerak. Keling, misollar bilan ko'rib chiqaylik. Quyidagi o'zgaruvchi bizda mavjud deb faraz qilaylik:

styles.less@var: div;

Keling, ushbu o'zgaruvchini selektorga kiritaylik. Turli vaziyatlarni ko'rib chiqaylik.

Misol

O'zgaruvchimizni selektor sifatida kiritamiz:

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

Kompilyatsiya natijasi:

styles.cssdiv {
  font-size: 20px;
}

Misol

Endi faraz qilaylik, bizning o'zgaruvchimiz selektorning bir qismini o'z ichiga oladi:

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

Kompilyatsiya natijasi:

styles.cssmain div {
  font-size: 20px;
}

Misol

Endi faraz qilaylik, bizning o'zgaruvchimizda teg nomi emas, balki uning idi mavjud. O'zgaruvchi nomi oldiga panjarani qo'shamiz:

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

Kompilyatsiya natijasi:

styles.css#div {
  font-size: 20px;
}

Misol

Endi faraz qilaylik, bizning o'zgaruvchimizda teg nomi emas, balki uning klassi mavjud. O'zgaruvchi nomi oldiga nuqtani qo'shamiz:

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

Kompilyatsiya natijasi:

styles.css.div {
  font-size: 20px;
}

Amaliy vazifalar

Задание 1

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: ul;

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

Задание 2

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: ul;

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

Задание 3

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: ul;

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

Задание 4

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: ul;

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

Задание 5

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: list;

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

Задание 6

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: list;

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

Задание 7

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: list;

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

Задание 8

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: list;

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

Задание 9

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: list;

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

Задание 10

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: .block;

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

Задание 11

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: .block;

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

Задание 12

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

styles.less@var: a;

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

Задание 13

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

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

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

Задание 14

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

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

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