less

@color:#000;
@color-red:red;
@color-bg:blue;

.transform-scale(@val:1){
    -webkit-transform: scale(@val);
    -moz-transform: scale(@val);
    -ms-transform: scale(@val);
    -o-transform: scale(@val);
    transform: scale(@val);
}

.transition(@property:all,@duration:1s,@time-function:linear,@delay:0s){
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

html,body{
    width:100%;
    height: 100%;
}
.box{
    width:250px;
    height:200px;
    color:@color;
    border:1px solid @color-red;
    position:absolute;
    left:100px;
    top:200px;
    background: @color-bg;
    .transition(@duration:1s);
    
     &:hover{
         .transform-scale(@val:1.5);
         background: lighten(@color-bg,60%);
     }
}
.box2{
    .box;
    left: 500px;
   
}

怎么使用less？

  <link rel="stylesheet/less" type="text/css" href="less/index.less" /> 

 <script type="text/javascript" src="js/less.js"></script> 

直接引入less文件和less.js，一般用于开发环境，自动刷新如下

<script type="text/javascript">
    var less = {
        env: 'development',
        poll: 500 
    }
</script>


<script type="text/javascript" src="js/less.js"></script>
<script type="text/javascript">
        less.watch();
</script>

一般上线的话不能直接用less,我们需要使用node将其编译为css文件

 npm install -g less 

 lessc -v 

 lessc index.less index.css 

 lessc index.less index.css -x 

参考文档

http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2016-07-22/527.html