This is the fourth day of my participation in the August Text Challenge.More challenges in August

Installation steps

  1. To install nodeJS, download the installation package from the official website based on the OPERATING system version

Download link: nodejs.org/en/download…

For example, if my computer is Windows10 64-bit, select this link:

After downloading, double-click directly to run, no special Settings are required to complete the installation.

  1. To check whether the installation is successful, enter:
node -v
Copy the code

If the installation is successful, the version number will appear:

  1. To install less online based on Node.js, run the following command:
npm install -g less
Copy the code

  1. Check whether the installation is successful. Use CMD to check the version of less
lessc -v
Copy the code

The use of Less

Create a file with the suffix.less and write less statements in the file.

Less variable

Some colors and values in CSS often use variables.

Grammar:

@ Variable name: value;Copy the code

1. Variable naming conventions

  • It must be prefixed with @
  • Cannot contain special symbols
  • You can’t start with a number
  • Case sensitivity

Such as:

@color: pink;
@Color: deeppink;

@fs14: 14px;
Copy the code

Specification for variable use

div {
    background-color: @color;
}
Copy the code

It solves the problem that CSS cannot change all colors directly, making maintenance easier

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 to generate.CSS files so that the HTML pages can use them.

Less file (style.less) to a.css file (style.css). This CSS is the CSS code we normally use.

lessc style.less > style.css
Copy the code

VScode Less plug-in

The Easy LESS plugin is used to compile LESS files into CSS files. After installing the plug-in, reload vscode and save less files to automatically generate CSS files

Less nested

Previous selectors used:

Less nested:

If an intersection/pseudo-class/pseudo-element selector is encountered, the inner selector needs to be preceded by an ampersand in order to be resolved to the parent element itself or the pseudo-class of the parent element. Goze is resolved to be the offspring of the parent selector.

Previous selectors used:

Less nested:

Less operation

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

Note:

  1. You can have two numbers, one with units, one with no units, and the final unit is the unique unit.
  2. If both numbers have units, the final unit is the unit of the first number.
  3. Operators must be left and right with Spaces, otherwise it sometimes causes problems (common with addition).
  4. Use parentheses to divide, otherwise it won’t work.

common.less:

// Set the HTML size in different screens according to the media query
// The screen is divided into 15 equal parts
// The default display HTML size reference width of 750px
@no: 15;

html {
    font-size: 50px;
}

//320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no); }}//360px
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no; }}Copy the code

common.css:

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333 px.; }}@media screen and (min-width: 360px) {
  html {
    font-size: 360px / 15; }}Copy the code