vue 中的预处理器 less

在 less 中文网中是这么介绍 less 的：

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

由于 vue-cli 构建的项目默认是不支持 less 的，所以一开始需要我们自己安装相关模块

一、LESS 的安装

为了便于在 vue 脚手架中使用 less，首先要通过 npm 对 less 进行安装和配置

// npm 安装less和less-loader
npm install less less-loader --save-dev

然后在 config 中进行 webpack 配置,增加相应的 loader

module.exports = {
    //  ...
    module: {
        rules: [
          //  ...
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

二、使用 LESS

在 vue 脚手架中使用时直接在代码中的 style 标签中 加上 lang="less" 属性即可。

<style lang="less" scoped>
 div {
   a {
      color:red;
    }
 }

三、LESS 的常见操作（https://less.bootcss.com/）

1. 变量。通过变量声明，可以存储常用的任何类型的值，包括 颜色、尺寸、选择器、字体名称和 URL 等，以便于尽可能多的重用 CSS

@background-color: #ffffff;
@color: #333;

div {
  background-color: @background-color;
  color: @color;
}

ul {
  background-color: @background-color;
}

li {
  color: @color;
}

2. 混合（Mixins）。将已有的 class 和 id 的样式应用到其他选择器上

#a{
  background-color: #fff;
  border-radius: 100%;
}

#b{
  width: 50px;
  height: 50px;
  #a
}

#c{
  width: 100px;
  height: 100px;
  #a
}

转换成常规的 css 语法如下：

#a {
    background-color: #fff;
    border-radius: 100%;
}
#b {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 100%;
}
#c {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 100%;
}

同时，Mixin 支持传入参数，如：

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;
    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

转换成 css 为：

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

注：如上所示，如果不想被引用的规则也出现在 CSS 代码中，可以后面加上括号

3. 嵌套。选择器互相嵌套构造样式表，可以与页面的 HTML 结构相匹配，避免冲突，节省代码量

ul{
    background-color: #fff;
    padding: 10px;
    li{
        margin: 10px;
    }
}

编译成 css 样式

ul{
    background-color: #fff;
    padding: 10px;
}
ul li{
        margin: 10px;
    }

4. 基础运算。可以对对数值和颜色进行基本的数学运算

@width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @width;
    background-color: @color - 100;// #004590
}

#right{
    width: @width * 2;// 200px
    background-color: @color;
}