Definition of less

Less is a css preprocessing language, which can compile less files into css through the preprocessor. Less adds functions such as variables, mixin s and functions, which makes up for the shortcomings of css and makes it more convenient to write css

How to use

1: Import js file

1. Introduce less in html js

   You can download less through cdn, and then import it through script tag

   <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
   // perhaps
   <script src="less.min.js"></script>
   Copy code

2. Introduce the written less file

   <link rel="stylesheet/less" href="index.less">
   <script src="less.min.js"></script>
   Copy code

   Note: the link tag should be introduced before the script tag, and the rel attribute should also be set to stylesheet/less

3. Execute html

   Note that html should run from a local server, not directly in the browser, otherwise there will be cross domain problems;

2: Dependent installation (recommended)

1. node global installation less

   npm install -g less  // You can also add less via yarn global
    Copy code

2. Execute on the command line

   lessc index.less index.css
    Copy code

3. Introduce the compiled index in html css

grammar

Variables

If a css color is used in multiple places, it has to be defined many times. If it needs to be modified, it has to be changed many times, which is very inconvenient;
less supports the writing of variables. The same values that are used more are defined through variables, which only need to be modified once.

Declare variables starting with @

@width: 50px;
@color: red;
@bgColor: blue;

.div1 {
 width: @width;
 color: @color;
 background: @bgColor;
}
.div2 {
 width: @width;  // If you want to modify the width, just change the width defined above
 color: @color;
 background: @bgColor;
}

// less compiled
.div1 {
 width: 50px;
 color: red;
 background: blue;
}
.div2 {
 width: 50px;
 color: red;
 background: blue;
}

Copy code

Mixins

Encapsulate a type of style, which can be directly called and reused in other elements

// Styles that need to be reused
.center(@width: 100px) {
  width: @width;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div1 {
   // call
  .center();
}
#div2 {
   // Call, you can pass parameters
  .center(200px);
}
// After compilation
#div1 {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div2 {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
Copy code

Nesting

css elements can't be nested. less extends this. It can nest and write styles just like the organizational structure of HTML, which is convenient to find and modify
Nesting uses more symbols &, which represent the reference of parent elements

@color: red;
body {
  .header {
    color: @color;
  }
  .content {
    color: @color;
    .item {
      color: @color;
      &.item-1 {
        color: @color;
      }
      &-2 { // Note that in this case, only the parent name is used here
        color: @color;
      }
    }
  }
  .footer {
    color: @color;
  }
}

// After compilation
body .header {
  color: red;
}
body .content {
  color: red;
}
body .content .item {
  color: red;
}
body .content .item.item-1 {
  color: red;
}
body .content .item-2 {
  color: red;
}
body .footer {
  color: red;
}

Copy code

Operations

Support +, -, *, / symbol operation

@width-200: 100px + 100px;
@width-50: 150px - 100px;
@width-10: 5px * 2px;

.div1 {
 width: @width-200;
}
.div2 {
 width: @width-50;
}
.div3 {
 width: @width-10;
}

// After compilation
.div1 {
  width: 200px;
}
.div2 {
  width: 50px;
}
.div3 {
  width: 10px;
}
Copy code

Built in Functions

Less has many built-in functions, which can handle percentages, decimals, colors and so on

@width: 0.5;
@color: #fa0141;
div{
    width: percentage(@width); // returns `50%`
    color: saturate(@color, 5%) // Increase color saturation by 5%
}

// After compilation
div {
  width: 50%;
  color: #fb0041;
}
Copy code

Importing

You can import other less files or css files. After importing, you can use the variables of this file and so on

import 'other.less'
import 'other.css'
Copy code

Comments

Multi line comments can use / * * /, and single line comments can use//

/*
multiline comment 
*/

// Single-Line Comments 
Copy code

Loop

less has no ready-made for loop, which is generally implemented by when + recursion;

Example code:
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // Next call until @ counter equals 0
  width: (10px * @counter); 
}

div {
  .loop(5); // Call, pass parameter 5
}

// After compilation
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

Copy code

Condition judgment

less has no ready-made if else. You can use when. If necessary, you can combine and or not or comma operator

.width1(@width) when (@width > 200px) {
    width: @width;
    background: yellow;
}
// and all must be satisfied
.width2(@width) when (@width > 200px)  and (@width < 400px) {
    width: @width;
    background: red;
}
// Not non operation, do not meet
.width3(@width) when  not (@width > 200px){
    width: @width;
    background: blue;
}
// Comma operator or operation, one of which is satisfied
.width4(@width) when  (@width > 100px), (@width > 200px){
    width: @width;
    background: green;
}
.div1 {
  .width1(400px);
}
.div2 {
  .width2(300px);
}
.div3 {
 .width3(100px);
}
.div4 {
 .width4(150px);
}

// After compilation
.div1 {
  width: 400px;
  background: yellow;
}
.div2 {
  width: 300px;
  background: red;
}
.div3 {
  width: 100px;
  background: blue;
}
.div4 {
  width: 150px;
  background: green;
}

Copy code

Inherit (extend)

: extend is a pseudo class that can inherit the style of the selector it refers to, and the parameter is the selector to be referenced;

.a {
  color: red;
  .b {
    color: green;
  }
}
.c {
  &:extend(.a);
}

// After compilation
// a and c styles are written together
.a,
.c {
  color: red;
}
.a .b {
  color: green;
}

Copy code