introduce

Less (short for Leaner Style Sheets) is a backward compatible CSS extension language.
Less is very similar to CSS and is easy to learn. Less adds only a few convenient extensions to the CSS language.

Less official website (click to jump)

install

• Using Less in the Node.js environment

## download
$ npm install -g less
## use
$ lessc style.less style.css

• Using Less in a browser environment

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Basic grammar

variable

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

Compile as:

#header {
  width: 10px;
  height: 20px;
}

blend

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

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

If you want to use these attributes in other rule sets, just enter the class name of the required attribute as follows:

#header {
  color: #111;
  .bordered();
}

Compile as:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#header {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

nesting

Less provides the ability to use nesting instead of or in combination with cascading.

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Compile as:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

operation

Arithmetic operators +, -, *, / can operate on any number, color, or variable.

• If possible, arithmetic operators convert units before adding, subtracting, or comparing.
• The calculation result is based on the unit type of the leftmost operand.
• If the unit conversion is invalid or meaningless, the unit is ignored.
• Invalid unit conversion, such as px to cm or rad to%.

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

Escape

Escaping allows you to use any string as a property or variable value.

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

Compile as:

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

function

Less has built-in functions for color conversion, string processing, arithmetic operations, etc.

Use the percentage function to convert 0.5 to 50%, increase the color saturation by 5%, reduce the color brightness 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);
}

Namespace and accessor

It is desirable to group mixins for organizational purposes or just to provide some encapsulation.

First define some blend styles:

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

Then mix the. button class into the #header:

#header {
  color: orange;
  #bundle.button();
}

mapping

You can use mixins and rulesets as map s of a set of values.

#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

Compile as:

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

Scope

The scope in Less is very similar to that in CSS. First, find variables and mixins locally. If not found, inherit from the "parent" scope.

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

notes

Both block and line comments can be used:

/* A block comment
 * style comment! */
@var: red;
// This line has been commented out!
@var: white;

Import

Import a. less file, and all variables in this file can be used. If the imported file has a. less extension, you can omit the extension:

@import "library"; // library.less
@import "typo.css";