1. Variables

Description: variable, can add, subtract, multiply and divide

2. mix

Description: is a way to include a set of properties from one ruleset into another. It can be understood that in ES6, a class is actually a function, all of which must be called with ().

3. Nesting

Description: Replaces stacking ability.

4. @ rule nesting and bubbling

Note: The @ rule can be nested in the same way as the selector, the @ rule will be placed in front, and the relative order of other elements remains unchanged. This is called bubbling.

5. Operation

Description: Arithmetic operators can operate on any variable and color numbers.

6. calc() calculation special case

Note: In order to maintain compatibility with CSS, calc() does not calculate mathematical expressions, but calculates the values of variables and mathematical formulas in nested functions.

7. Function

Description: The less function has a variety of built-in functions for converting colors, processing strings, arithmetic operators, etc.

8. Mapping

Description: Mixins and rulesets are used as maps to a set of values.

9. Code display

9.1 HTML display

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>less常用的使用</title>
    <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 变量 -->
    <div class="box"></div>
    <!-- 混合 -->
    <div class="box1"></div>
    <!-- 嵌套 -->
    <div class="box2">
        <div class="box3"></div>
    </div>
    <!-- @规则嵌套和冒泡 -->
    <div class="box4"></div>
    <!-- 运算 -->
    <div class="box5"></div>
    <!-- calc()特例 -->
    <div class="box6"></div>
    <!-- 函数 -->
    <div class="box6"></div>
    <!-- 映射 -->
    <div class="box7"></div>
</body>
</html>

9.2LESS display

/*  less是一门向后兼容CSSS扩展语言，js开发的用于将Less样式转成CSS样式的Less.js工具
说明变量，可以进行加减乘除 */
@width: 20px;
.box {
  width: 2 * @width;
  height: 2 * @width;
  background-color: red;
}
/* 混合：是一种将一组属性从一个规则集包含到另一个规则集的方法。
 */
.default {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box1 {
  /*   相当于继承类名为default的所有样式
  可以这么理解，在ES6中类其实也是一个函数，所有调用要用()
  */
  .default();
  background-color: red;
}
/*  嵌套：代替层叠能力
选中元素中的元素，只需要嵌套就可以了 */
.box2 {
  .box3 {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
}
/* @规则嵌套和冒泡
 @规则可以与选择器以相同的方式进行嵌套，@规则会被放在前面，其他元素的相对顺序保持不变。这就叫冒泡
 */
.box4 {
  width: 200px;
  @media (max-width: 500px) {
    width: 200px;
    @media (max-width: 251px) {
      width: 300px;
    }
  }
  @media (max-width: 100px) {
    background-color: red;
  }
}
/* 运算 */
/* 算数运算符可以对任何变量和颜色数字进行运算 */
@good: 20px;
.box5 {
  width: @good*2; //40px
  height: 10cm+10cm; //20cm
}
/* calc()特例 */
/* 为了与CSS保持兼容，calc()并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值 */
@study: 20px;
.box6 {
  width: calc(@study*2); //
  height: calc(@study*2);
  background-color: yellowgreen;
}
/* 转义 */
/* 以前需要你使用任意字符串作为属性作为属性或变量值现在不需要了 */

/* 函数 */
/* less函数内置了多种函数用于转换颜色，处理字符串，算数运算符等 */
@baseWidth:20;
.box6{
    width: percentage(@baseWidth); //20%
    height: percentage(@baseWidth); //20%
    
}
/* 映射 */
// 可以将混合和规则集作为一组值的映射使用
.reference(){
    width: 100px;
}
.box7{
    width:.reference[width]; //100px
    height: 100px;
    background-color: red;
}
/* 作用域 */
/* Less中的作用域与CSS中的作用域非常类似。首先在本地查找便变量和混合，如果找不到，则从父级作用域继承 */


/* 注释 */
// 单行注释不会编译到css中，多行注释才会被编译到css中

/* 导入 */
/* 如果文件时.less扩展名，则可以将扩展名省略掉 */
@import "./lib";
@import "./index.css";

9.3 Compiled CSS

/*  less是一门向后兼容CSSS扩展语言，js开发的用于将Less样式转成CSS样式的Less.js工具
说明变量，可以进行加减乘除 */
@import "index.css";
.box {
  width: 40px;
  height: 40px;
  background-color: red;
}
/* 混合：是一种将一组属性从一个规则集包含到另一个规则集的方法。
 */
.default {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box1 {
  /*   相当于继承类名为default的所有样式
  可以这么理解，在ES6中类其实也是一个函数，所有调用要用()
  */
  width: 200px;
  height: 200px;
  background-color: pink;
  background-color: red;
}
/*  嵌套：代替层叠能力
选中元素中的元素，只需要嵌套就可以了 */
.box2 .box3 {
  width: 200px;
  height: 200px;
  background-color: pink;
}
/* @规则嵌套和冒泡
 @规则可以与选择器以相同的方式进行嵌套，@规则会被放在前面，其他元素的相对顺序保持不变。这就叫冒泡
 */
.box4 {
  width: 200px;
}
@media (max-width: 500px) {
  .box4 {
    width: 200px;
  }
}
@media (max-width: 500px) and (max-width: 251px) {
  .box4 {
    width: 300px;
  }
}
@media (max-width: 100px) {
  .box4 {
    background-color: red;
  }
}
/* 运算 */
/* 算数运算符可以对任何变量和颜色数字进行运算 */
.box5 {
  width: 40px;
  height: 20cm;
}
/* calc()特例 */
/* 为了与CSS保持兼容，calc()并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值 */
.box6 {
  width: calc(20px*2);
  height: calc(20px*2);
  background-color: yellowgreen;
}
/* 转义 */
/* 以前需要你使用任意字符串作为属性作为属性或变量值现在不需要了 */
/* 函数 */
/* less函数内置了多种函数用于转换颜色，处理字符串，算数运算符等 */
.box6 {
  width: 2000%;
  height: 2000%;
}
/* 映射 */
/* 混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。 */
.box7 {
  width: 100px;
  height: 100px;
  background-color: red;
}
/* 作用域 */
/* Less中的作用域与CSS中的作用域非常类似。首先在本地查找便变量和混合，如果找不到，则从父级作用域继承 */
/* 注释 */
/* 导入 */
/* 如果文件时.less扩展名，则可以将扩展名省略掉 */

Less commonly used methods