This series:

Less(V3.9.0) Usage details – Basic usage

Less(V3.9.0) use details – variables

Less(V3.9.0) uses details – nested and parent selectors &

Less(v3.9.0) — extend(nested)

Less(V3.9.0) – Mixin

Others to be updated…

Translated from the official document of less lesscss.org/features/#v…

variable

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
Copy the code

Compiled into

#header {
  width: 10px;
  height: 20px;
}
Copy the code

Variables can also be used in other ways, such as selector names, attribute names, urls addresses, @import import statements

// Variables
@my-selector: banner;
@images: ".. /img";
@property: font-weight;

// Usage
.@{my-selector} {
  @{property}: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url("@{images}/white-sand.png");
}
Copy the code

Compiled into

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url(".. /img/white-sand.png");
}
Copy the code

A variable that references a variable

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color; }}Copy the code

Compiled into

.section .element {
  color: green;
}
Copy the code

Lazy evaluation, variables do not have to be declared before use, similar to js variable promotion, when a variable is declared twice, starting from the current scope and looking up to the last scope declared

.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;
Copy the code

Compiled into

.lazy-eval {
  width: 9%;
}
Copy the code

Reference CSS property values as variables (v3.0.0). When multiple duplicate property values are encountered, the rule is evaluated lazily

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
Copy the code

Compiled into

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}
Copy the code

Due to features like variable promotion and lazy evaluation, it is possible to change some library default variables

// library
@base-color: green;
@dark-color: darken(@base-color.10%);

// use of library
@import "library.less";
@base-color: red;
Copy the code

Base-color becomes red and dark-color becomes dark red, which is useful when implementing theme colors