1. Protect the disadvantages of the CSS

CSS is a non-procedural language without concepts such as variables, functions, and scopes.

  • CSS requires a large amount of seemingly illogical code to be written, and CSS redundancy is relatively high.
  • It is not convenient to maintain and expand, and is not conducive to reuse.
  • CSS does not have great computing power
  • For non-front-end developers, it is often difficult to write well-organized and maintainable CSS code projects because of their lack of CSS writing experience.

2. Less is introduced

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

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

Based on the syntax of CSS, it introduces variables, mixins, operations and functions, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS. As its name suggests, Less allows us to do more with Less code.

Less Website: http://lesscss.cn/

Common CSS preprocessors: Sass, Less, and Stylus

Less is a CSS preprocessor language that extends the dynamic nature of CSS.

3. Less installation

① To install nodeJS, choose 8.0 version and go to nodejs.cn/download/

② Check whether the installation is successful, use CMD command (Win10 is Windows +r open run CMD) — enter “node -v” to check the version

③ To install Less online based on nodeJS, run the NPM install -g Less command

4 Check whether the installation is successful. Run the lessc -v command to check the version

4. Use Less

We will create a new file with the suffix less and write less statements in the less file.

  • Less variable
  • Less compilation
  • Less nested
  • Less operation

4.1. Variables used by Less

A variable is something that has no fixed value and can be changed. Because some of the colors and values in our CSS are often used.

@ Variable name: value;Copy the code

4.1.1. Variable naming conventions

  • Must be prefixed with @
  • Cannot contain special characters
  • You can’t start with a number
  • Case sensitivity
@color: pink;
Copy the code
// Use body{color:@color; } a:hover{ color:@color; }Copy the code

4.2. Less compilation

In essence, Less consists of a custom syntax and a parser that allows users to define their own style rules, which are eventually compiled into corresponding CSS files by the parser.

So, we need to compile our less files into CSS files so that our HTML pages can use them.

4.2.1. Less Compile vocode Less plug-in

The Easy LESS plugin is used to compile LESS files into CSS files

After installing the plug-in, reload vscode.

Simply save the Less file and the CSS file will be generated automatically.

4.3. Less nesting

// Change the CSS to less # header. logo {width: 300px; } #header { .logo { width: 300px; }}Copy the code

If you met (intersection | pseudo-classes | pseudo element selector), use & connection

  • If an inner selector is preceded by no ampersand, it is resolved as a descendant of the parent selector;
  • If there is an ampersand, it is resolved to the parent element itself or to a pseudo-class of the parent element.
a:hover{ color:red; } a{ &:hover{ color:red; }}Copy the code

4.4. Less computation

Any number, color, or variable can be used. Less provides arithmetic operations of addition (+), subtraction (-), multiplication (*), and division (/).

/*Less */ @witdh: 10px + 5; div { border: @witdh solid red; } /* Generated CSS */ div {border: 15px solid red; } /*Less */ width: (@width + 5) * 2;Copy the code
  • How to write multiplication (*) and division (/)
  • The 1px + 5 operator is separated by a space between the left and right
  • For an operation between the values of two different units, the resulting value takes the units of the first value
  • If only one value between two values has a unit, the result of the operation takes that unit