less is an extension of css. It expands functions such as variables, mixins, and functions, making CSS code writing more efficient. This article mainly introduces the variables of less.
1. Normal usage of variables (variables)
in the .less file
@link-color: #000;
.btn {
color: @link-color;
}
compiled css file
.btn {
color: #000;
}
2. Variables are used as selector names
Syntax: variable declaration: @ variable: value -------- use: . @{variable}
in the .less file
@my-selector: btn;
.@{my-selector} {
color: #000;
}
compiled css file
.btn {
color: #000;
}
3. Variables are used as attribute names
Usage is the same as using it as a selector name:
in the .less file
@property: color;
.@{property} {
@{property}: red;
background-@{property}: green;
}
compiled css file
.color {
color: red;
background-color: green;
}
4. Variables are used as variable names
In a .less file, you can define another variable using the variable
in the .less file
@primary: red;
@secondary: blue;
.section {
@color: primary;
.element {
color: @@color;
}
p {
color: @secondary;
}
}
compiled css file
.section .element {
color: red;
}
.section p {
color: blue;
}
5. Lazy Evaluation of Variables
Variables do not need to be declared before use, but can be declared after use. If there are local variables, the attributes of this scope will refer to the local variables. If there are no local variables, the variables declared later will overwrite the previously declared variables (if declared two local variables, similarly)
in the .less file
.lazy-eval {
width: @var;
@a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;
compiled css file
.lazy-eval {
width: 100px;
}
6. Attributes as Variables
Use the $prop syntax to use properties as variables
in the .less file
.widget {
color: red;
background-color: $color;
}
.ul {
height: 20px;
.li {
padding: $height;
}
height: 40px;
}
compiled css file
.widget {
color: red;
background-color: red;
}
.ul {
height: 20px;
height: 40px;
}
.ul .li {
padding: 40px;
}
The above is my summary of the use of variables in Less. If other friends have any questions, please leave a message in the comment area for discussion, thank you~~