Less knowledge points organize study notes

1. Introduction to Less

Less is a CSS preprocessing language that can use variables, nesting, operations, etc. to facilitate the maintenance of project CSS style codes.

2. Installation

2.1 Deploy node.js environment

Official website address: https://nodejs.org/en/download. After the software is installed, enter node -v and npm -v in the CMD command window, respectively. The version number pops up, indicating that the node.js environment is installed successfully.

2.2 Install Less

Use the npm package management tool to install the Less package globally

npm install -g less

less is installed, lessc is also installed

lessc -v

The lessc command can convert less files into css files.

# 把xx.less文件转成xx.css文件
lessc xx.less xx.css

2.3 WebStorm configuration Less

Purpose: The editor automatically converts less files into css files

I use WebStorm editor here. WebStorm upper left corner–>files–>Settings–>Tools–>File Watchers–>Click to add

The lessc path can be obtained through the where lessc command

css export parameters

# $FileParentDir(less)$ 是获取 less 目录的路径
# $FileDirPathFromParent(less)$ 是获取 less 文件到 less 目录的路径
# $FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字
$FileName$
$FileParentDir$\css\$FileNameWithoutExtension$.css
--source-map

3. Less syntax

3.1 Variables

Variables can be used as ordinary variables, selector variables, attribute variables, URL variables, and declared variables.

Variable definition syntax:

@变量名: 值

Variable usage syntax:

@变量名

variable scope

It is consistent with the scope of variables in js

---

Ordinary variables

less：

@bgColor: #ffffff;

.div {
  background-color: @bgColor;
}

Compiled css:

.div {
    
    
  background-color: #ffffff;
}

---

selector variable

less：

@section: div;

@{section} {
  background-color: #000000;
}

explain:

When a variable is used as a selector variable, curly brackets are required when using the variable: @{variable name}

Compiled css:

div {
    
    
  background-color: #000000;
}

---

attribute variable

less：

@var: width;

div {
  @{var}: 30px;
}

explain:

When a variable is used as an attribute variable, curly brackets are required when using the variable: @{variable name}

Compiled css:

div {
    
    
  width: 30px;
}

---

URL variable

less：

@bgImg: "../image/bg_img.png";

div {
  background-image: url("@{bgImg}");
}

explain:

When a variable is used as a URL variable, curly brackets are required when using the variable: @{variable name}

Compiled css:

div {
    
    
  background-image: url("../image/bg_img.png");
}

---

declare variables

less：

@fontSize: {
  font-size: 20px;
}

div {
  @fontSize();
}

Compiled css:

div {
    
    
  font-size: 20px;
}

---

3.2 Nesting

Define css according to the hierarchical structure of the page

& can refer to the role of the outer selector

Nested writing styles according to the above HTML structure

less：

#banner {
  .img {
    width: 100%;
  }

  .list {
    li {
      a {
        text-decoration: none;

        &:hover {
          color: red;
        }

        img {
          width: 25%;
        }
      }
    }
  }
}

Translated css:

#banner .img {
    
    
  width: 100%;
}
#banner .list li a {
    
    
  text-decoration: none;
}
#banner .list li a:hover {
    
    
  color: red;
}
#banner .list li a img {
    
    
  width: 25%;
}

analyze:

Comparing less and translated css, less has a clear structure and is easier to maintain css styles.

---

3.3 Operation

• In less files, any number, color or variable can participate in addition, subtraction, multiplication and division operations
• For operations between two values ​​in different units, the value of the operation result will be the unit of the left value.
• If only one value between the two values ​​has a unit, the operation result will take that unit.

---

add

less：

@baseWidth: 1000px;

div {
  height: @baseWidth + 200;
}

Translated css:

div {
    
    
  height: 1200px;
}

---

reduce

less：

@baseWidth: 1000px;

div {
  height: @baseWidth - 200;
}

Translated css:

div {
    
    
  height: 800px;
}

---

take

less：

@baseWidth: 1000px;

div {
  height: @baseWidth * 2;
}

Translated css:

div {
    
    
  height: 2000px;
}

---

remove

less：

// px和vw单位换算
@baseSize: (100vw / 750);

div {
  height: @baseSize * 25;
}

Translated css:

div {
    
    
  height: 3.33333333vw;
}

---

summary:

During development, I use Less variables, nesting, and operations more often. Other inheritance, import, conditional expressions, functions, mixed methods, etc. are rarely used, so I won’t sort them out. When you use them, you will read the information.