Less

Less：

编译方法：

koala(http://koala-app.com/index-zh.html )

node.js

浏览器端

 

1.变量定义：@变量名:值；

@test1:120px;

 

2.混合：css可以嵌套(可带参数)

.box{
  width: @test1;
  height: @test1;
  background-color: black;
  .border
}

.border{
  border:solid5px pink;
}

 

参数

.border_02(@width){
  border: solid yellow @width;
}

 

3．匹配模式：

  类似java中的函数。

 

4．运算：

 +-*/

 

5．嵌套规则

.list{
  span{
    float: right;
    color: #ffffff;
  }
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
  li{
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    background-color: #999;
    margin-bottom: 5px;
  }
  a{
    float: left;
    color: #ffffff;
    &:hover{//&代表上一个选择器
      color: red;
    }
  }
}

 

6．@arguments 传全部属性

 

7．避免编译：~’ ’

.test_03 {
  width: calc(300px-30px);
}

 

http://less.bootcss.com/