К содержанию

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