Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
less 的使用有两方式：
1.使用npm 安装
npm install -g less
编译的具体命令
lessc styles.less styles.css
或
lessc --clean-css styles.less styles.min.css
2.使用vue.js
<link rel="stylesheet/less" href="styles.less" />
<script src="js/less.js"></script>
less语法介绍：
1.变量
1 @w:200px; 2 @h:200px; 3 @property:color; 4 @value:red; 5 @images:'../img'; 6 .setting-wrapper:{ 7 width:@w; 8 height:@h; 9 background-@{property}:@value; 10 background-image:url('@{images}/picture.jpg'); 11 }
2.变量定义变量
1 @speak:"summer"; 2 @value:"speak"; 3 div::after{ 4 content:@@value; 5 }
3.嵌套
1 #box:{ 2 .main{ 3 width:90px; 4 height:100px; 5 } 6 &:after{ 7 content:"summer"; 8 } 9 &_wrapper:{ 10 margin:10px; 11 } 12 } 13 /* 编译后的css */ 14 #box .main{ 15 width:90px; 16 height:100px; 17 } 18 #box:after{ 19 content:"summer"; 20 } 21 #box_wrapper:{ 22 margin:10px; 23 }
4.混合
1 .border(@w:1px){ 2 border: @w solid #ccc; 3 } 4 .box{ 5 position: relative; 6 left: 0; 7 right: 0; 8 width: 300px; 9 height: 300px; 10 .border(2px); 11 }
编译后：
1 .box { 2 position: relative; 3 left: 0; 4 right: 0; 5 width: 300px; 6 height: 300px; 7 border: 2px solid #ccc; 8 }
5.继承
1 .box{ 2 font: 12px/28px '微软雅黑'; 3 text-align: center; 4 } 5 .wrapper{ 6 &:extend(.box); 7 background: #ccc; 8 }
编译后：
1 .box, 2 .wrapper { 3 font: 12px/28px '微软雅黑'; 4 text-align: center; 5 } 6 .wrapper { 7 background: #ccc; 8 }
6.注释
1 /* 2 3 /* */ 可以编译在 CSS 文件中 4 // 不会被编译在 CSS 文件中 5 6 */
7.导入
1 import "style"; 2 import "style.less"; //.less 可以省略 3 import "style.css"; //导入css文件
8.避免编译
1 .wrapper { 2 content: ~"^//* some horrible but needed css hack"; 3 }
编译后：
1 .wrapper { 2 content: ^//* some horrible but needed css hack; 3 }