简介

LESS是一个CSS预处理器，文件后缀是less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。

注意: 浏览器不识别LESS代码，目前阶段，网页要引入对应的CSS文件。使用VS Code插件：Easy LESS，保存LESS文件后自动生成对应的CSS文件。

运算

加、减、乘直接书写计算表达式，除法需要添加小括号。

.box {
  width: 100 + 20px;
  width: 100 - 20px;
  width: 100 * 20px;
  width: (100 / 2rem);
}

对应的css代码：

.box {
  width: 120px;
  width: 80px;
  width: 2000px;
  width: 50rem;
}

嵌套

.father {
  color: red;
  .son {
    color: blue;
    a {
      color: pink;
      // & 表示当前选择器，写到谁的大括号里面就表示谁
      &:hover {
        color: orange;
      }
    }
  }
}

对应的css代码：

.father {
  color: red;
}
.father .son {
  color: blue;
}
.father .son a {
  color: pink;
}
.father .son a:hover {
  color: orange;
}

变量

定义变量：@变量名: 数据;，使用变量：CSS属性: @变量名;。

@myColor: pink;
.box {
  color: @myColor;
}

导入与导出

导入语法：@import "文件路径";，如果是less文件可以省略后缀。

@import './a.less';
@import './a';

导出语法，在less文件的第一行添加：// out: 存储URL，文件夹后面需加 / 。

// out: ./css/
// out: ./index.css

禁止导出语法，在less文件第一行添加：// out: false。