less的一些基础用法

使用less写样式，这样项目就很可以方便维护和管理，里面也可以写复用的样式
具体参照less的中文网站
但是less还不能再浏览器中直接使用，还需要引入文件之后编译

但是在企业生产环境中并不会这么用，因为还需要加载文件并不友好

1.变量

@main-color:#ff6700; 
body{
    background-color: @main-color;
}

可以在主题换肤中有作用

2.混合（mixins）

2.1 简单混合使用

// 设置一个样式
.xk{
    border: 1px solid #ccc;
}
.box{
    .xk;
    // 重复使用
    background-color: skyblue;
}

实际浏览器会自动加载，将样式引入进去

2.2 函数混合式使用

// 混合使用延伸1 (带参数使用)
// 设置好所需混合参数以及变量，封转样式
// 相当于调用一个函数
.loButton(@bgcolor){
    .xk;
    background-color:@bgcolor;
}

.redcButton{
    .loButton(pink);
    text-align: center;
}

将变量转化成所传递的参数

2.3 带默认参数

// 混合参数使用延伸(默认参数)
.xxButton(@bgcolor:#ccc){
    .xk;
    background-color: @bgcolor;
}
.greyButton{
    .xxButton();
}

如果使用但是不传递任何参数，那么就会使用默认指定的参数

2.4 argument参数使用

// arguments参数
.borderStyle(@width:10px,@style:solid,@color:#ccc){
    border: @arguments;
    // 变量 
}
.bigbox{
    content:~"@main-color";
    //相当于转义,就是不让它翻译
    .borderStyle();
}

3.嵌套（nesting）

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

但是不建议嵌套层级太多
4.运算

@color: #224488 / 2; //结果是 #112244

5.作用域
变量先从本地寻找，然后再从父级查找

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

如果有什么不对的地方，希望大家多多指正