Less basic

1. Disadvantages of maintaining CSS

CSS is a non-procedural language, without the concepts of variables, functions, SCOPE (scope), etc.

CSS needs to write a lot of seemingly illogical code, and CSS redundancy is relatively high.
It is inconvenient to maintain and expand, and is not conducive to reuse.
CSS does not have good computing power
For non-front-end development engineers, it is often difficult to write well-organized and easy-to-maintain CSS code projects due to lack of CSS writing experience

2. Introduction to Less

Less (short for Leaner Style Sheets) is a CSS extension language, also known as CSS preprocessor.

As a form of extension of CSS, it does not reduce the function of CSS, but adds procedural language features to CSS in the existing CSS syntax.

Based on the syntax of CSS, it introduces functions such as variables, mixins, calculations, and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS. As its name says, less Allows us to do more with less code.

Less Chinese website: Http://lesscss.cn/

Common CSS preprocessors: Sass, Less, Stylus

Summary: Less is a CSS preprocessing language, which extends the dynamic characteristics of CSS

3. Less installation

Install nodejs, URL: http://nodejs.cn/download/
To check whether the installation is successful, use the cmd command (window + r to open and enter cmd) — enter "node -v" to view the version
To install Less online based on nodejs, use the cmd command "npm install -g less", you can
To check whether the installation is successful, use the cmd command "lessc -v" to check the version

Less use

First create a file with the suffix of less, and write less statements in this less file.

Less use
Less compilation
Less nesting
Less operations

4. Less variables

Variables have no fixed values and can be changed. Because some of the colors and values in our CSS are often used.

grammar:

@变量名:值;

1. Variable naming convention

Must be prefixed with @
Cannot contain special characters
Cannot start with a number
Case Sensitive

// 定义一个粉色的变量
@color:pink;
// 定义一个 字体为14像素的变量
@font14:14px;
body{ 
  background-color: @color;
}
div {
  color: @color;
  font-size: @font14;
}

5. Less compilation

Essentially, Less contains a custom grammar and a parser. Users define their own style rules based on these grammars, and these rules will eventually be compiled through a parser to generate corresponding CSS files.

Therefore, we need to compile our less files into CSS files so that our html pages can be used.

vscode Less plugin

Easy LESS plugin is used to compile less files into css files

After installing the plug-in, just save the Less file and the CSS file will be automatically generated.

6. Less nesting

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
  // less嵌套 子元素的样式直接写到父元素里面

  a {
    color: purple;
  }
}

If met (Intersection|Pseudo-Class|Pseudo-Element Selector)

If there is no ampersand in front of the inner selector, it is parsed as a descendant of the parent selector;
If there is an ampersand, it is parsed as a parent element or a pseudo-class of the parent element.

a {
    color: purple;
    // 如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加&
    &:hover {
      color: red;
    }
  }

7. Less operations

Any number, color or variable can participate in the calculation. That is, Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/)

@border:5px + 5;
div {
  width: 200px - 50;
  height: 200px * 2;
  border: @border solid red;
}
img {
  width: 82 / 50rem;
  height: 82 / 50rem;
}

Compilation result of the above code:

div {
    
    
  width: 150px;
  height: 400px;
  border: 10px solid red;
}
img {
    
    
  width: 1.64rem;
  height: 1.64rem;
}

note:

How to write multiplication sign (*) and division sign (/)
There is a space in the middle of the operator separated by 1px + 5
For the operation between the values of two different units, the value of the operation result takes the unit of the first value
If only one value has a unit between two values, the result of the operation will take that unit