一.什么是Less
Less(Leaner Style Sheets的缩写)，它是一门向后兼容的CSS扩展语言，Less和Css两者之间是非常像的，因此，如果有CSS基础，学起Less也是比较容易的。Less和其他预处理在本质上都是JS库，这些库的作用是将预处理代码编译成标准的CSS代码，所以我们使用预处理器可以通过多种方式来使用。
二.Less的使用方式
1.直接引用JS文件
使用JS直接使用Less的时候需要注意，link的标签需要在less.js之前引入，并且link标签的rel属性要设置为stylesheet/less.
//引入自己写的less代码
//引入Less.js的核心库
2.通过npm全局安装来使用less
通过npm全局安装
npm install less -g
-g参数表示将lessc命令安装到全局环境，如果想要安装特定的 版本，可以在包名称后面添加@版本号，如npm install less@2.7.1 -g.
在命令行中运行如下代码就可以将test.less编译为test.css。
lessc test.less test.css
但是在命令行中手动去编译less文件为css文件的这种使用频率不高，因为大多数情况下，作为前端一般都使用Vue,React等主流框架进行开发，所以我们大多数情况下都会在Webpack中使用Less.
3.在Webpack中使用Less
由于Webpack本身只能处理js文件，所以需要借助less-loader来帮忙处理Less文件
//下载less,less-loader
npm install less less-loader -save-dev
//下载css-loader,style-loader
npm install css-loader style-loader -save-dev
配置webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.less$/i, loader: [
// 将 less 文件编译成 css 文件，注意 Webpack Loader 加载顺序从右到左
'style-loader', 'css-loader', 'less-loader'
]
}
]
}
};
实际上，在使用像Vue这样的框架时，官方的CLI脚手架已经帮我们集成了css预处理器，不需要我们自己手动进行Webpack的配置，在使用脚手架初始化项目的时候勾选上自己喜欢的预处理器就好了。
三.Less的具体用法
1.嵌套
less支持以嵌套的方式去写css代码，不过多赘述，直接上代码
按照父类嵌套子类规范来书写的css：
/*CSS写法*/
.msg-list{
width: 500px;
padding: 16px 20px;
max-height: 500px;
}
.msg-list .msg-item{
height: 200px;
left: 20px;
}
.msg-list .msg-item .msg-item-title{
color: antiquewhite;
font-size: 24px;
}
使用Less嵌套写法：
/*Less写法*/
.msg-list{
width: 500px;
padding: 16px 20px;
max-height: 500px;
.msg-item{
height: 200px;
left: 20px;
&-title{
color: antiquewhite;
font-size: 24px;
}
}
}
以上这两种写法在页面上得到的效果是一样的，但是我们可以直观地感受到Less的写法更优雅，更简洁,在Less写法中支持嵌套使用父选择器&，这样写起来更简洁优雅，不需要再去嵌套复杂的css代码了。
2.Less中的变量
在Less中，支持想JS中声明一个变量，在变量声明时需要以@开头，并且需要以分号来结束声明，在使用时直接用变量名来替换设置的样式值即可。代码如下：
/*Less写法*/
/* 声明变量 */
@fontSize: 16px;
@height: 500px;
/* 使用变量 */
.msg-list{
height: @height;
font-size:@fontSize;
line-height:@height;
}
编译后的CSS代码：
/* CSS代码 */
.msg-list{
height: 500px;
font-size: 16px;
line-height: 500px;
}
使用变量的好处就是，我们可以将公共的样式值抽离出来，如果多个模块文件共用变量时，我们就可以将这些公共的样式值放在一个单独的文件中，然后使用@import导入。
3.导入使用
下面是一个公共文件的public.less的代码：
@text-size: 20px;
@text-color:black;
@text-title-color:pink;
@text-title-size:36px;
在业务模块中就可以通过@import来使用public.less中的一些变量：
@import "public.css":
.msg-item{
font-size: @text-size;
color: @text-color;
&-title{
font-size: @text-title-size;
color:@text-title-color;
}
}
4.插值用法
以上的例子都是用在CSS中的属性值，其实变量还能以插值的形式在选择器名称，属性名称，URL路径以及@import声明中使用，插值用法类似于JS模板字符串，在使用时首先定义一个变量a，然后以@{a}的方式去使用：
/* 定义变量 */
@slec:banner;
@fontSize:font-size;
@imgPath:img-path;
.@{slec}{
@{fontSize}:16px;
font-weight:bold;
maigin:auto;
background-img:url("@{imgPath}/1.png");
}
编译后：
.banner{
font-size: 16px;
font-weight: bold;
margin: auto;
background-img:url("img-path/1.png");
}
5.混合
熟悉Vue框架的对mixin应该很熟悉，Less中的混合就和Vue中的mixin的概念差不多，Less中的混合就是一个设置了属性的选择器a混入选择器b中，这样，选择器b中既有选择器b本身设置的属性也包含选择器a中的属性，Less混合代码如下：
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box-wrap{
padding: 8px 16px;
border: 1px solid black;
.flex-center();
}
编译后的CSS代码如下：
.box-wrap{
padding: 8px 16px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
以上的用法都是固定的属性，其实混合还可以带参数使用，这种用法跟 JS 函数非常类似
.size(@s) {
width: @s;
height: @s;
}
// 默认参数
.br(@r: 4px) {
border-radius: @r;
}
.box {
padding: 4px;
.size(20px);
.br();
}
编译后的CSS如下：
.box {
padding: 4px;
width: 20px;
height: 20px;
border-radius: 4px;
}
另外需要注意的是，Less 代码编译时，会把混合代码也选择渲染出来，如果不想保留混合原本的代码，定义的时候可以在它后面加上 () ；此外，在混合代码后面加上!important,所有的属性都会加上!important。
6.函数与计算
Less中使用函数和计算的频率并不是特别高，因为CSS本身就是负责页面样式的，计算的事情还是交给JS处理比较好，在这里也就以颜色计算和图片尺寸计算简单地说一下：
// 假设有一个16进制的颜色值，需要取它的不透明度为50%的值，有几种做法：
// 16进制的颜色值
@color: #ea78bc;
// 做法1：去找一个可以将16进制转成rgb的网站，将其转为rgb形式后再用rgba表示
@colorRgb: rgb(234, 120, 188); // 16进制 -> rgb
@colorResult1: rgba(234, 120, 188, 0.5);
// 做法2：使用Less提供的red、green、blue函数获取rgb值，再用rgba表示
@colorResult2: rgba(red(@color), green(@color), blue(@color), 0.5);
// 做法3：使用fade、fadeout函数直接处理
@colorResult3: fade(@color, 50%); // 设置颜色的不透明度
@colorResult4: fadeout(@color, 50%); // 增加颜色的不透明度
以上得到的颜色效果是一样的
图片相关函数：
// 返回图片宽高
@imgSize: image-size("image.jpg"); // output: 100px 100px
// 返回图片宽
@imgWidth: image-width("image.jpg"); // output: 100px
// 返回图片高
@imgHeight: image-height("image.jpg"); // output: 100px
// 返回图片的base64数据
@imgUrl: data-uri('./image.jpg'); // output: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==')
.box-wrap {
width: @imgWidth;
height: @imgHeight;
background-image: @imgUrl;
background-size: @imageSize;
}
在上述代码中，由于不确定图片尺寸而无法精确涉及元素样式时，Less中和图片有关的函数就起作用了。
关于计算属性，在Less官网中给的定义是这样的：
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
如果光看官网中的解释可能会有点抽象，在代码中诠释这段话的具体代码如下：
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%