Preface:

Less is a backward-compatible CSS extension language that includes the Less language and a JavaScript tool called les.js for converting Less styles to CSS styles.

1. Variables:

Look directly at the code:

@width:12px;
@height:@width + 10px;
#box {
    width:@width;
    height:@height;
}
Copy the code

The compiled:

#box {
    width:12px;
    height:22px;
}
Copy the code

2. Mix:

Blending is a method of including (or mixing) a set of attributes from one rule set into another. Suppose we define a class as follows:

.myClass {
    color:red;
    margin:10px;
}
Copy the code

If we want to use it in other classes, then:

.parent a {
    background:white;
    .myClass();
}
Copy the code

3. Nesting:

Less provides the ability to use nesting instead of or in combination with cascading, such as:

.content {
    color:red
}
.content a {
    font-size:15px
}
.content .header {
    width:30px
}
Copy the code

Less can be written like this:

.contetn {
    color:red;
    a {
        font-size:15px;
    }
    .header: {
        width:30px
    }
}
Copy the code

4. Operation:

The arithmetic operators +, -, *, and/can operate on any number, color, or variable. If possible, arithmetic operators are worth more after addition or subtraction and do unit conversion. The unit type of the leftmost operand is used to calculate the result. If the unit conversion is invalid or meaningless, the unit is ignored. Invalid unit conversion columns such as: px to cm or rad to % conversion.

// Many operands are converted to the same unit @conversion-1:5cm + 10mm; // result is 6cm @conversion- 2:2-3cm - 5mm; // The results were -1.5cm @incompatible-units: 2 + 5px - 3cm; // the result is 4px @base: 5%; @filler: @base * 2; @other: @base + @filler; // The result is 15%Copy the code

There is no conversion between multiplication and start. Because neither of these operations makes sense in most cases, a length multiplied by another length yields a region, and CSS does not support specifying a region. Less will operate as the number is and will specify an explicit unit type for the result of the calculation.

@base: 2cm * 3mm; // The result is 6cmCopy the code

Color operation:

@color: #224488 / 2; // Background-color: #112244 + #111; // The result is #223355Copy the code

5. Escape:

Less allows you to use arbitrary strings as property or variable values. Anything in the form of ~’anything’ or ~’anything’ will be output as is, except interpolation

@min768: ~"(min-width: 768px)"; .element {@media @min768 {font-size: 1.2rem; }}Copy the code

The compiled:

@media (min-width: 768px) {. Element {font-size: 1.2rem; }}Copy the code

Note: From Lesson 3.5, abbreviated as:

@min768: (min-width: 768px); .element {@media @min768 {font-size: 1.2rem; }}Copy the code

6. Functions:

Less has built-in functions for converting colors, manipulating strings, arithmetic operations, and more. These functions are described in detail in the Less function manual. Column:

@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

Namespaces and accessors:

Sometimes, for organizational purposes or just to provide some encapsulation, you want to group mixins. You can implement this requirement more intuitively with Less. Suppose you want to put some mixins and variables under the #bundle for future reuse or distribution:

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

Now, if we want to mix the.button class into #header a, we can do this:

#header a { color: orange; #bundle.button(); // You can write it as #bundle >.button}Copy the code

8. Mapping:

Starting with Less 3.5, you can also use mix and rule sets as mappings to a set of values.

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
Copy the code

The compiled:

.button {
  color: blue;
  border: 1px solid green;
}
Copy the code

9. Scope

Scopes in Less are very similar to scopes in CSS. Variables and blends are first looked for locally, and if not, inherited from the “parent” level scope.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
Copy the code

As with CSS custom properties, mixins and variables do not have to be defined prior to reference. Therefore, the following Less code example is the same as the above code example:

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
Copy the code

10. Notes:

Both block and line comments can be used:

/* block comment * style comment! */ @var: red; // This line is commented out! @var: white;Copy the code

11. Import:

Imports work as you would expect. You can import a.less file and use all the variables in that file. If the imported file has the.less extension, you can omit the extension:

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