К содержанию

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