К содержанию

Kintamieji selektoriuose LESS

Kintamuosius galima naudoti ir selektoriuose. Tačiau tam reikia naudoti šiek tiek kitokį kintamojo įterpimo sintaksę: po @ kintamojo pavadinimą reikia paimti į riestinius skliaustus. Pažiūrėkime į pavyzdžius. Tarkime, kad turime šį kintamąjį:

styles.less@var: div;

Įterpkime šį kintamąjį į selektorių. Panagrinėkime įvairias situacijas.

Pavyzdys

Įterpkime savo kintamąjį kaip selektorių:

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

Kompiliavimo rezultatas:

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

Pavyzdys

Tarkime, kad dabar mūsų kintamajame yra dalis selektoriaus:

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

Kompiliavimo rezultatas:

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

Pavyzdys

Tarkime, kad dabar mes sakome, kad mūsų kintamajame yra ne žymos pavadinimas, o jos id. Prieš kintamojo pavadinimą pridėkime grotelę:

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

Kompiliavimo rezultatas:

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

Pavyzdys

Tarkime, kad dabar mes sakome, kad mūsų kintamajame yra ne žymos pavadinimas, o jos klasė. Pridėkime prieš kintamojo pavadinimą tašką:

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

Kompiliavimo rezultatas:

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

Praktinės užduotys

Задание 1

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: ul;

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

Задание 2

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: ul;

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

Задание 3

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: ul;

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

Задание 4

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: ul;

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

Задание 5

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: list;

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

Задание 6

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: list;

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

Задание 7

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: list;

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

Задание 8

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: list;

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

Задание 9

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: list;

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

Задание 10

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: .block;

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

Задание 11

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: .block;

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

Задание 12

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

styles.less@var: a;

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

Задание 13

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

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

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

Задание 14

Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:

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

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