LESS基础知识学习笔记

共计 738 个字符，预计需要花费 2 分钟才能阅读完成。

简介

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。