Less is also a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making CSS easier to maintain and expand. Less can run on Node or in a browser.

Less installation and compilation

NPM install less -g // NPM install less --save-dev // Check less-vCopy the code

Writing less code

// index.less
@success: green;
.box {
   color: @success;
}
Copy the code

Command line compilation

// Lessc index.less index.css is recommendedCopy the code

For the introduction of Less in the project, we can refer to the application of Sass in Vue. The idea of introduction and application is the same, but the syntax is different. Here’s a quick look at the introduction of less in Vue:

vue create my-project
npm i -D less-loader less
Copy the code

Second, core grammar

variable

Variable declaration symbol @

@blue: #5B83AD;
#header {
  color: @blue;
}
Copy the code

Less provides the ability to use nesting instead of or in combination with cascading. Another idea in nested rules is called scope, and scope in Less is very similar to the concept of scope in programming languages. Variables and blends are first looked for locally; if not, the compiler looks for them in the parent scope, and so on. And variables and blends do not have to be declared before use.

@var: red;
#a{
  #b{
    color: @var; // The result is white
  }
  @var: white;
}
Copy the code

The import

You can import a.less file and use all the variables in the file without the extension.

@import "library"; // library.less
@import "typo.css";
Copy the code

annotation

Block (multi-line) comments and line comments can be used, and like Sass, line comments are hidden after compilation.

Mixing and operation

Blending is a way of introducing a set of attributes from one rule set to another. To use blending, access the name of the class of the desired attribute inside another rule set.

.a{ color: green }
.b { 
  .a;
  font-size: 40px
}
Copy the code

Any number, color, or variable can be manipulated. Less can infer differences between colors and units. If units are used in an operation, Less automatically calculates the units.

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: # 888 / 4;

font-size: 1px + 5;
// font-size: 6px;
Copy the code

function

Less provides many functions for converting colors, manipulating strings, and performing arithmetic operations. Function in detail reference website (www.css88.com/doc/less/fu.) . In the example below we use Percentage to convert 0.5 to 50%, then increase the saturation of the base color value by 5%, and finally increase the brightness of the background color by 25% and increase the hue value by 8.

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base.5%);
  background-color: spin(lighten(@base.25%), 8);
}
Copy the code

The namespace

Sometimes, for organizational purposes, or to provide some encapsulation, you’ll want to group your mixins together. Doing this in Less is straightforward, assuming you want to bundle some mixins and variables under #bundle for later reuse or distribution. Now if we want to mix the.button class in #header a, we can use the following code writing method.

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab{... }.citation{... }}Copy the code
#header a {
  color: orange;
  #bundle > .button;
}
Copy the code

It is used to group mixins under common names. Using namespaces avoids name conflicts and encapsulates mixin groups externally.