Less

互联网技术发展太快了，想想前几年还在手动改一行行修改CSS文件。直至现在Less的出现，less支持变量，类似函数调用，使得CSS更加容易维护和编写。上手非常容易，官方也提供了详细的资料。

/* less学习备忘 */

/*1.一种注释，可以在css文件中显示*/
//另一种注释，不在css文件中显示

// 2.变量以@开始，正如php变量以$开始
@test_width:100px;

.border{
  border: solid 5px pink;
}

.content{
  background-color: red;
  width: @test_width;
  height: @test_width;

  .border;  // 混入
}


.radius(@myradius:20px){
  -webkit-border-radius:@myradius;
  -moz-border-radius:@myradius;
  border-radius: @myradius;
}


#rd{
  width: 100px;
  height: 100px;
  background-color: yellow;

  // 3.混入(类似函数调用)
  .radius();
}


// 4.匹配模式，相当于js中的if语句，if(top){}else if(bottom){}
.triangle(top,@w:5px,@c){
  // width: 0px;
  // height: 0px;
  // overflow: hidden;

  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: solid;
}

.triangle(bottom,@w:20px,@c:red){
  border-width: @w+10;    // 5.变量可参与+-*/运算
  border-color: @c transparent transparent transparent;
  border-style: solid;
}

// 6.@_用于添加公共部分代码
.triangle(@_,@w:20px,@c:red){
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.tangle{
  .triangle(bottom);
}


// 7.嵌套规则，非常实用的一个功能
.news{
  width: 300px;
  margin: 30px auto;
  padding: 0px;
  list-style: none;

  li{ // news li {}
    height: 30px;
    line-height: 30px;
    background-color: yellow;
    margin-bottom: 5px;
    padding: 0 10px;
  }

  a{
    float: left;

    &:hover{  // &: 相当于 news a:hover{}
      color: red;
    }
  }

  span{
    float: right;
  }
}


// 8.@arguments，参数比较多时，可直接用关键字@arguments代替
.border_arg(@s:solid,@w:5px,@c:red){
  border: @arguments;
}


.br{
  .border_arg();

  // 9.避免编译，直接在语句前加上~
  //width: calc(30px-5px);
  width: ~'calc(30px-5px)';
}

 更多介绍见：​​lesscss.net​​

 Less编译工具：​​koala-app.com/index-zh.html​​