less学习之混合

最近学习了css3一些知识，便想去学习css的预编less，功夫不负有心人，在网上也找到了相关的资料。现将所学less的部分资料进行整理。

less 是什么？

less相当于jquery,我觉得它是css的轻量级库。less css可以在多种语言环境中使用，包括浏览器前端，桌面端、服务器端

koala 是桌面端应用比较广泛的，可以从它的官网直接下载安卓使用。

知识点之一（变量）

//在对应的css中不会被编译

//a=12
// a代表它就是12；
@test_width:30px;
//less中想要声明变量，一定要用@开头，例如：@变量名：值
.box{
  width:@test_width;
  height:@test_width;
  background: yellow;
}

知识点二（混合）

//混合 （混合有三种形式：正常的，混合带参数 混合带默认值）
//形式之一(可以把css的类名放到css中)
.border{
  border: solid 5px pink;
}
.box{
  width:@test_width;
  height:@test_width;
  background: yellow;
  .border;
}
.box2{
  .box;
  margin-bottom: 100px;
}

 //形式之二(混合带参数 ps:在引用是一定要带参数)
.border_02(@border_width){
  border:solid red @border_width;
}
.test_hunhe{
  .border_02(70px)
}
//形式之三（混合-默认值 ps：引用的时候可以不带参数，也可以带参数，参数可以自己定义）
.border_03(@border_width:10px){
  border:solid green @border_width;
}
.test_hunhe03{
  .border_03()
}
//混合的例子（css3中的应用）
.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius:@radius;

}
.radius_test{
  width:100px;
  height:40px;
  background: green;
  .border_radius(10px )
}