Spring Boot+Vue前后端分离商城实战（十一）CSS 预处理器 Less

前言

本章我们要讲的是 CSS 预处理器，没有学过预处理器的同学，会认识到原来 CSS 也能设置变量、方法。吃透本章内容，对后期上手开发项目写 CSS 部分，有很大的帮助，比如项目的主题色我们可以设置多个变量，不用重复的编写。Flex 布局可以写成一个公用的方法，不必每次都写重复的代码。简单说就是提取大量重复的代码，能让 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';
}

浏览器中使用 Less

我们如何在网页中使用 Less 呢？有两种形式，第一种是通过 npm 下载 Less 包，通过 webpack 打包编译后可以编译成最终的 CSS。第二种是直接通过 Less 脚本在 HTML 页面中使用。