less初学语法-注释-声明-混合

Less类似于Jquery（相对于js）,是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
Koala是Less，Sass，Compass和CoffeeScript编译的GUI应用程序，可帮助Web开发人员更有效地使用它们。

使用手册 http://lesscss.cn/

关于less文件的注释，平时的css注释//对于less也是通用，并且会同时出现在css文件中。//，的注释方式只会显示在less文件中，并不会同时出现在css文件中，运用less文件时，维护的时候只需看less文件即可。**
@charset “UTF-8”;需要在less中加入文档头
如果要在less中声明一个变量，就必须加上@这个头部，例如@test-width：120px

例如：less文件中

@test-width:300px;
@test-height:300px;
.box{
    width: @test-width;
   background: black;
    height: @test-width;
}

则css文件中此时：

.box {
  width: 300px;
  background: black;
  height: 300px;
}

less中的混合，less文件如下

.box{
    width: @test-width;
   background: black;
    height: @test-width;
   .border;//混合，相当于加入一个border的class
}
.border{
        border: 5px solid #cccccc;
}
 
.box2{ 
    margin-left: 20px;//box2需要的属性值
    .box;//把box的属性直接复制
}

css文件如下：

.box {
  width: 300px;
  background: black;
  height: 300px;
  border: 5px solid #cccccc;
}
.border {
  border: 5px solid #cccccc;
}
.box2 {
  margin-left: 20px;
  width: 300px;
  background: black;
  height: 300px;
  border: 5px solid #cccccc;
}

混合的方法也可带参数，分为以下两种写法

//混合-可带参数
//混合-可带参数
.test1(@test-width){//不直接设置数值
    width: @test-width;
}
.test2{//数值添加
    .test1(20px);
}


//第二种写法
.test3(@test-width:20px){//直接设置数值
    width: @test-width;
} 
.text4{//数值已经设置所以为空
    .test3()
}

css此时代码为：

test2 {
  width: 20px;
}
.text4 {
  width: 20px;
}

混合的实用例子，例如css兼容性

.border-radius(@border-radius){
    -webkit-border-radius: @border-radius;
     -moz-border-radius: @border-radius;
     border-radius: @border-radius;
}
.radius-test{
    margin-left: 20px;
    .border-radius(5px);
}

css此时

.radius-test {
  margin-left: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}