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.变量

@w:200px;
@h:200px;
@property:color;
@value:red;
@images:'../img';
.setting-wrapper:{
      width:@w;
      height:@h;
      background-@{property}:@value;
      background-image:url('@{images}/picture.jpg');    
}

　　2.变量定义变量

@speak:"summer";
@value:"speak";
div::after{
    content:@@value;  
}

　　3.嵌套

#box:{
   .main{
        width:90px;
        height:100px;  
    }
    &:after{
        content:"summer";  
    }
    &_wrapper:{
        margin:10px;
    }  
}
/*    编译后的css     */
#box .main{
       width:90px;
       height:100px;  
}
#box:after{
       content:"summer";  
}
#box_wrapper:{
       margin:10px;
}

 　　4.混合

.border(@w:1px){
    border: @w solid #ccc;
}
.box{
    position: relative;
    left: 0;
    right: 0;
    width: 300px;
    height: 300px;
    .border(2px);
}

　　编译后：

.box {
  position: relative;
  left: 0;
  right: 0;
  width: 300px;
  height: 300px;
  border: 2px solid #ccc;
}

　　5.继承

.box{
    font: 12px/28px '微软雅黑';
    text-align: center;
}
.wrapper{
    &:extend(.box);
    background: #ccc;
}

　　编译后：

.box,
.wrapper {
  font: 12px/28px '微软雅黑';
  text-align: center;
}
.wrapper {
  background: #ccc;
}

　　6.注释

/*

  /* */ 可以编译在 CSS 文件中
  //      不会被编译在 CSS 文件中

*/

　　7.导入

import "style";        
import "style.less";    //.less 可以省略
import "style.css";     //导入css文件

　　8.避免编译

.wrapper {
  content: ~"^//* some horrible but needed css hack";
}

　　编译后：

.wrapper {
  content: ^//* some horrible but needed css hack;
}

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