К содержанию

Promenljive unutar selektora u LESS

Promenljive se mogu koristiti i unutar selektora. Međutim, za to je potrebno koristiti malo drugačiju sintaksu za ubacivanje promenljive: nakon @ ime promenljive treba staviti u vitičaste zagrade. Pogledajmo na primerima. Neka imamo sledeću promenljivu:

styles.less@var: div;

Ubacićemo ovu promenljivu u selektor. Razmotrimo različite situacije.

Primer

Ubacićemo našu promenljivu kao selektor:

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

Rezultat kompilacije:

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

Primer

Neka sada naša promenljiva sadrži deo selektora:

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

Rezultat kompilacije:

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

Primer

Neka sada kažemo da u našoj promenljivoj ne sadrži ime taga, već njegov id. Dodajmo tarabu ispred imena promenljive:

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

Rezultat kompilacije:

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

Primer

Neka sada kažemo da u našoj promenljivoj ne sadrži ime taga, već njegovu klasu. Dodajmo tačku ispred imena promenljive:

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

Rezultat kompilacije:

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

Praktični zadaci

Задание 1

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: ul;

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

Задание 2

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: ul;

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

Задание 3

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: ul;

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

Задание 4

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: ul;

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

Задание 5

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: list;

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

Задание 6

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: list;

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

Задание 7

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: list;

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

Задание 8

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: list;

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

Задание 9

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: list;

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

Задание 10

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: .block;

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

Задание 11

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: .block;

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

Задание 12

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

styles.less@var: a;

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

Задание 13

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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

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

Задание 14

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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

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