К содержанию

Variables inside selectors in LESS

Variables can also be used inside selectors. However, to do this, you need to use a slightly different syntax for inserting a variable: after @, the variable name must be taken in curly brackets. Let's look at some examples. Let's say we have the following variable:

styles.less@var: div;

Let's insert this variable into the selector. Let's look at different situations.

Example

Let's insert our variable as a selector:

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

Compilation result:

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

Example

Now let our variable contain part of the selector:

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

Compilation result:

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

Example

Now let's say that our variable contains not the tag name, but its id. Let's add a hash before the variable name:

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

Compilation result:

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

Example

Now let's say that our variable contains not the tag name, but its class. Let's add a dot before the variable name:

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

Compilation result:

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

Practical tasks

Задание 1

Tell me what the result of compiling the following code will be:

styles.less@var: ul;

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

Задание 2

Tell me what the result of compiling the following code will be:

styles.less@var: ul;

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

Задание 3

Tell me what the result of compiling the following code will be:

styles.less@var: ul;

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

Задание 4

Tell me what the result of compiling the following code will be:

styles.less@var: ul;

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

Задание 5

Tell me what the result of compiling the following code will be:

styles.less@var: list;

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

Задание 6

Tell me what the result of compiling the following code will be:

styles.less@var: list;

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

Задание 7

Tell me what the result of compiling the following code will be:

styles.less@var: list;

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

Задание 8

Tell me what the result of compiling the following code will be:

styles.less@var: list;

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

Задание 9

Tell me what the result of compiling the following code will be:

styles.less@var: list;

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

Задание 10

Tell me what the result of compiling the following code will be:

styles.less@var: .block;

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

Задание 11

Tell me what the result of compiling the following code will be:

styles.less@var: .block;

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

Задание 12

Tell me what the result of compiling the following code will be:

styles.less@var: a;

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

Задание 13

Tell me what the result of compiling the following code will be:

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

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

Задание 14

Tell me what the result of compiling the following code will be:

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

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