Less

简介

Less是一个 CSS 预处理器，文件后缀是 .less.

Less 扩展了 CSS 语言，使具备一定的逻辑性、计算能力。

浏览器不识别 Less 代码，网页要引入对应的 CSS 文件。

注释

语法：

// 单行注释内容

/*
  多行注释
  注释内容
*/

计算

允许使用 加、减、乘、除 的计算表达式。除法需要添加小括号或使用 ./.

.box {
  width: 6 + 5 rem;
  height: 6 - 5 rem;
  padding: 6 * 5 rem;
  margin: (6 / 5rem);
  line-height: 6 ./ 5 rem;
}

嵌套

通过嵌套写法生成后代选择器。

使用 & 符号表示当前选择器不生成为后代选择器，配合伪类选择器、伪元素使用。

语法：

.父级选择器 {
    // 父级样式
    .子级选择器 {
        // 子级样式
    }
}

.box {
  width: 85px;
  .nav {
    display: flex;
    width: 20px;
    .left {
      flex: 1;
      &:hover {
        color: pink;
      }
    }
  }
}

变量

使用变量存储数据，方便使用和修改。

定义变量语法：@变量名: 值;.

使用变量语法：CSS属性: @变量名;.

@color: pink;

.box {
  color: @color;
}

导入

在 Less 中引入其他样式的 Less 文件。

/*less文件后缀可以省略*/
@import "#url.less";

导出

将 Less 文件编译并导出一个 CSS 文件。文件位置默认与 less 文件同级。

如希望修改导出文件位置，在 Less 文件的第一行添加如下代码，文件夹名称后面务必要加 / ，如果没有 css 文件，会自动新建一个。

// out: ./url/file.css/

如不希望 less 文件导出为 css 文件，在第一行添加如下代码：

// out: false