Quickly get Less - Variables

variable

Variables: define a common value

1. Overview

It's not uncommon for a value to be used dozens or even hundreds of times in a stylesheet, like so:

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

Variables make it possible to control these values ​​in one place, which will make our code easier to maintain. The way to define variables is very simple, that is, @xxxxadd @the symbol to declare.

// 变量
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);

// 用法
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

The generated result is as follows:

a,
.link {
    
    
  color: #428bca;
}
a:hover {
    
    
  color: #3071a9;
}
.widget {
    
    
  color: #fff;
  background: #428bca;
}

2. Variable interpolation

In addition to the above example using variables to control values ​​in CSS rules, variables can also be used in other places, such as selector names, property names, URLs, and @importstatements

1. Selector

   // 变量
   @my-selector: banner;
   
   // 用法
   .@{my-selector} {
     font-weight: bold;
     line-height: 40px;
     margin: 0 auto;
   }
   

   The generated result is as follows:

   .banner {
         
         
     font-weight: bold;
     line-height: 40px;
     margin: 0 auto;
   }
   

2. urls

   // 变量
   @images: '../img';
   
   // 用法
   body {
     color: #444;
     background: url('@{images}/white-sand.png');
   }
   

   The generated result is as follows:

   body {
         
         
     color: #444;
     background: url('../img/white-sand.png');
   }
   

3. import-expression

   // 变量
   @variables: './variables';
   
   // 用法
   @import '@{variables}/index.less';
   

4. Attributes

   @property: color;
   
   .widget {
     @{property}: #0ee;
     background-@{property}: #999;
   }
   

   The generated result is as follows:

   .widget {
         
         
     color: #0ee;
     background-color: #999;
   }
   

3. Using variables to define variables

In Less, you can use a variable to define another variable.

Writing 1:

@primary: green;

.section {
  @color: @primary;

  .element {
    color: @color;
  }
}

The generated result is as follows:

.section .element {
    
    
  color: green;
}

Writing 2:

@primary: green;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

The generated result is as follows:

.section .element {
    
    
  color: green;
}

I personally think that writing method 1 is easier to understand

4. Lazy declaration

Variables do not have to be declared before use, that is, before using this variable, this variable may not be declared, and it can be declared later.

This is the same as the js before es6. Variables declared with var can be post-positioned, but I personally think this is really not good. Not to mention confusing code, it is also prone to errors

The following are valid less codes

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

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

@var: @a;
@a: 100%;

The above two pieces of code are valid, and the results are as follows:

.lazy-eval {
    
    
  width: 9%;
}

When the same variable is defined multiple times, using the variable will search from the bottom up from the current scope, and the last defined variable will be used, that is, the latter definition will overwrite the previous one. This is very similar to css, where the latter property overrides the former.

For example:

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    width: @var;
    @var: 3;
  }
  width: @var;
}

The generated result is:

.class {
    
    
  width: 1;
}
.class .brass {
    
    
  width: 3;
}

Essentially, every scoped scope has a "final" value, and so do properties in the browser, such as an example using a custom property:

.header {
    
    
  --color: white;
  color: var(--color); /* 最终 color 将为 black */
  --color: black;
}

This means that Less variables behave very similar to CSS.

5. Properties as variables

Properties can be easily treated as variables directly using $propNamethe syntax . Examples are as follows:

.widget {
  color: #efefef;
  background-color: $color;
}

Used here $coloras a variable, the corresponding value

The generated result is:

.widget {
  color: #efefef;
  background-color: #efefef;
}

Of course, like variables, attribute variables are also searched according to the principle that the last definition will override all previous definitions.

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

The generated result is:

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