К содержанию

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