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:
@var: div;
Keling, ushbu o'zgaruvchini selektorga kiritaylik. Turli vaziyatlarni ko'rib chiqaylik.
Misol
O'zgaruvchimizni selektor sifatida kiritamiz:
@{var} {
font-size: 20px;
}
Kompilyatsiya natijasi:
div {
font-size: 20px;
}
Misol
Endi faraz qilaylik, bizning o'zgaruvchimiz selektorning bir qismini o'z ichiga oladi:
main @{var} {
font-size: 20px;
}
Kompilyatsiya natijasi:
main 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:
#@{var} {
font-size: 20px;
}
Kompilyatsiya natijasi:
#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:
.@{var} {
font-size: 20px;
}
Kompilyatsiya natijasi:
.div {
font-size: 20px;
}
Amaliy vazifalar
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: ul;
@{var} {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: ul;
div @{var} {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: ul;
div @{var} {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: ul;
@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: list;
.@{var} {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: list;
#@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: list;
.@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: .block;
ul@{var} {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var: a;
@{var}:hover {
text-decoration: none;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
