CSS 预处理工具 Less 的介绍及使用 步骤

Less是什么

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。最基础的例子如下所示：

@base: #fff;
.wh(@width, @height) {
  width: @width;
  height: @height;
}
.box {
  color: @base;
  .wh('30px', '30px');
}

编译输出后的结果：

.box {
  color: #fff;
  width: '30px';
  height: '30px';
}

接下来我们打开前端开发环境，用之前介绍的 Vue CLI 工具初始化一个 Vue 项目进行 Less 的学习。 项目初始化完成后，在项目根目录运行如下命令行安装 less 和 less-loader：

cnpm i less less-loader -D

Less的使用方法

Less 中的注释

我们在写代码的时候，会记录一下这段代码的功能或者使用注意事项等，Less 也不例外，两种注释形式：

• 以 // 开头的注释，注释单行，且不会被编译到 CSS 文件中。
• 以 /**/ 包裹的注释，注释多行，同样也不会被编译到 CSS 文件中。

Less 中的变量

Less 中使用 @ 符号申明变量，比如 @color: red。比方说我现在写一个电商项目，我需要设置项目中主色、辅助色等，代码如下所示： App.vue

<template>
  <div id="app">
    <div class="box">
      <p class="one">我是less</p>
      <p class="two">我是less</p>
      <p class="three">我是less</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style lang="less" scoped>
@primary: red;
@deepColor: green;
@lightColor: blue;

.box {
  .one {
    color: @primary;
  }
  .two {
    color: @deepColor;
  }
  .three {
    color: @lightColor;
  }
}
</style>

浏览器展示如下所示：

有一点要注意的是，如果在后面声明了同名变量，变量值会被后面的覆盖，比如上述代码：

@primary: red;
@deepColor: green;
@lightColor: blue;
@primary: pink 
.box{
   
  .one {
   
    color: @primary;
  }
  .two {
   
    color: @deepColor;
  }
  .three {
   
    color: @lightColor;
  }
};

那么最后第一个 p 标签的文字就会变成粉红色。

程序员要培养自己的举一反三能力，颜色可以写成变量，文字的大小同样也可以，并且 less 文件能通过 @import 关键词引入其他的 less 文件，后面我会讲到这块内容。

Less 中的嵌套

市面上所有