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