К содержанию

Променљиве унутар селектора у 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;
}