less 使用简介

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 }

更多内容参考 less官网或者 less中文网。