less

• Less (Leaner Style Sheets) is a backward compatible CSS extension language.
• Is a dynamic style language, which endows CSS with the characteristics of dynamic language;

Variables

• Variable can customize a series of general styles separately and can be called when necessary.

Less code

// You can customize the style
@width: 10px;
@height: @width + 10px;
// Just call where needed
#header {
  width: @width;
  height: @height;
}

Compiled CSS code

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

Mixins

• You can introduce the attributes of a defined group of class/id into the attributes of another group of class/id

Less code

// Defined classes
.box{
    color: #ccc;
    border: 1px solid #ccc;
}
//Introduce the defined class into other classes
#main{
    font-size: 12px;
    //Property code of the imported box
    .box()
}

Compiled CSS code

.box {
  color: #ccc;
  border: 1px solid #ccc;
}
#main {
  font-size: 12px;
  /*Property code of the imported box*/
  color: #ccc;
  border: 1px solid #ccc;
}

Nesting

• Inheritance can be realized by using one selector to nest another selector to write code (imitating the organizational structure of HTML);
• Make the code more concise;

Less code

// Parent box style
.box{
    color: #ccc;
    // Child box style
    .blub{
        border: 1px solid #ccc;
    }
}

Compiled CSS code

.box {
  color: #ccc;
}
.box .blub {
  border: 1px solid #ccc;
}

(& represents the parent of the current selector)

Less code

span{
    display:block;
    //Use & to indicate the parent of the current selector
    &::before{
        content:"";
        display:block;
    }
}

Compiled CSS code

span {
  display: block;
}
span::before {
  content: "";
  display: block;
}

@Rule nesting and bubbling

• Nesting (can be nested in the same way as selectors);
• Bubble (compile time = = @ rule will be put in front of = =, and the relative order of other elements in the same rule set will remain unchanged.)

Less code

.box {
    width: 500px;
    //@After compilation, it will be put in front
    @media (min-width: 768px) {
      width: 300px;
      //@After compilation, it will be put in front
      @media  (min-resolution: 192dpi) {
        width: 300px;
      }
    }
     //@After compilation, it will be put in front
    @media (min-width: 1280px) {
      width: 800px;
    }
  }

Compiled CSS code

.box {
  width: 500px;
}
@media (min-width: 768px) {
   /*box The box is put in the back*/
  .box {
    width: 300px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
   /*box The box is put in the back*/
  .box {
    width: 300px;
  }
}
@media (min-width: 1280px) {
   /*box The box is put in the back*/
  .box {
    width: 800px;
  }
}

Operations

• Arithmetic operators +, -, *, / can operate on any number, color, or variable.
• 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%.

1. All operands are converted to the same unit (units are different and cannot be converted, +, -, / expressions are reserved)

Less code

@width:5cm + 2mm;
@height:10 - 3% -2mm;
@size:2 * 9px -3cm;
.box{
    width:@width;		//width: 5.2cm;
    height:@height;		//height: 7% -2mm;
    font-size: @size;	//font-size: 18px -3cm;
}

1. Multiplication * Less will operate as the number is and will specify a clear unit type for the calculation result. (arithmetic operation of color)

@color:#fff/2;
@size:2px * 9%;
.box{
    font-size: @size;				//font-size: 18px;
    color: @color;					//color: #fff/2;
    background-color: #100 + #cfc;	// background-color: #ddffcc;
}

1. calc() does not evaluate mathematical expressions, but evaluates variables and mathematical formulas in nested functions.

@var: 50vh/2;
.box{
    width: calc(50% + (@var - 20px));  // width: calc(50% + (25vh - 20px));
}

Escape

• Allows you to use any string as an attribute or variable value;
• Before Less 3.5: writing method @ min16:~"16px"
• Less 3.5 start: writing method @ min16:16px (quotation mark escape is not required)

Less code

@size16:~"16px";
@size:16px;
.box{
    font-size: @size;	//font-size: 16px;
    width: @size16;  	//width: 16px;
}

Functions

• Less has built-in functions for color conversion, string processing, arithmetic operations, etc. (refer to the less function manual)

Example:

1. Use the percentage function to convert 0.5 to 50%

2. Increase color saturation by 5%

3. The color brightness decreases by 25% and the hue value increases by 8

@base: #f04615;
@width: 0.5;
.box {
  width: percentage(@width); 		// width: 50%;
  color: saturate(@base, 5%);		//color: #f6430f;
  background-color: spin(lighten(@base, 25%), 8);//background-color: #f8b38d;
}

Namespace and accessor

• Namespace (grouping and encapsulating mixins into an attribute space)
• Accessor: (namespace group name)

Example:

//Namespace
//If you don't want them to appear in the output CSS, attach () to the namespace
//(for example #box())
#box() {
  .button {
    display: block;
    border: 1px solid black;
    &:hover {
      background-color: white;
    }
  }
}
.letter{
  #box.button();
}

Compiled CSS code

.letter {
  display: block;
  border: 1px solid black;
}
.letter:hover {
  background-color: white;
}

Maps

• Starting with less version 3.5, you can also use mixins and rulesets as map s of a set of values.

Example:

//Namespace
#colors() {
  primary: blue;
  secondary: green;
}
.button {
  //Get attribute values by mapping
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

Compiled CSS code

.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.

Example:

@var: red;

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

Comments

• /*Multiline comment content*/
• //Single line note content

/* A block comment
style comment! */
@var: red;

// This line has been commented out!
@var: white;

Importing

• If the imported file is less extension, the extension can be omitted

Syntax:

@import "style file"

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

END