参考链接 less客户端安装：
<link rel="stylesheet/less" tyle="text/css" href="style.less"><!-- less样式文件一定要在引入less.js前先引入 --> <script src="less.min.js"></script> <script>less.watch()</script><!-- 开启监视模式 -->npm编译： 1.安装nodejs； 2.全局安装less npm install less -g； 3.进入要编译的less所在目录，（shit+鼠标右键）打开命令窗口； 4.编译 lessc style.less > style.css； 5.压缩参数 lessc style.less > style.css -x ；
less使用： 1.变量： 变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
//申明 @c-orange:#ff6600; @f18:font-size:18px; //调用 .class{ background-color: @c-orange; border:1px solid @c-orange; font-size:@font-size; }2.嵌套 LESS 可以让我们以嵌套的方式编写层叠样式。
.class{ font-family:"microsoft yahei"; .btn{ display:inline-block; text-align: center; padding:@p15; border-bottom:@border+2 solid @c-white; background-color:@c-orange+#111; color:@c-white; //如果你想写串联选择器，而不是写后代选择器，就可以用到"&"了 &.confirm{ color:red; background:#ddd; } &:hover{ color:#fff; background:#666; } }3.混合： 混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
3.1 单参数混合
//申明 .classA(@radius:5px){ border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; } //调用 .classB{ font-size:18px; //默认5px .classA; } .classC{ //传参数 10px .classA(10px); }3.1 多参数混合（@arguments变量）
//申明 .box-shadow(@x:0,@y:0,@z:6px,@color:rgba(0,0,0,.6)){ -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } //调用 .class{ .box-shadow(0,1px,8px); }4.命名空间： 简而言之，将参考容器内元素的样式属性进行封装，并灵活调用。
<div class="div1"> <a class="btn1">btn1</a> </div> <div class="div2"> <a class="btn2">btn2</a> </div> .div1{ .btn1{ display:inline-block; text-align:center; padding:2px 10px; background-color:#ff6600; color:#fff; font-size:15px; margin-top:10px; &:hover{ background-color:#999; color:#666; } } } .div2{ .btn2{ //调用(copy)div1内的btn1的样式 .div1 > .btn1; } }5.运算：
<div class="containner"> containner <p class="content">content</p> </div> @c-orange:#ff6600; @c-white:#fff; @width:300px; .containner{ background-color:@c-orange; color:@c-white; width:@width; padding:20px; text-align: left; .content{ //颜色运算 background-color:lighten(@c-orange,30%); border:4px solid @c-orange + #333; //尺寸运算 width:@width/2; height:@width/4; line-height:@width/4; margin:0 auto; } }6.作用域： LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
@var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }7.javascript表达式: JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号(英文键盘状态下tab上面的那个按键)的方式使用。
@str:`"china".toUpperCase() + '!'`; .msg:before{ content:@str; //CHINA! height:35px; width:100px; }8.字符串插值: 变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构。
@base-url: "https://ss0.bdstatic.com"; .msg{ width:271px; height:130px; //注意别漏加‘{}’号 background:#fff url("@{base-url}/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png") center no-repeat; background-size: 100% 100%; }