Less学习

一、变量
定义变量，可在其他页面直接引入。如果修改主题色，直接修改变量即可

@cloud-color-primary:#15abfe;
@cloud-bg-primary:#eeeeee;
.sub_title{
color:@cloud-color-primary
}
输出：
.sub_title{
color:#15abfe;
background-color:@cloud-bg-primary
}

二、混合 Mixins
1.基础用法

.cloud-border-bottom{
border-bottom:solid #ddd 1px
}
.cloud-list-item{
padding:10px;
.cloud-border-bottom;
}
输出：
.cloud-list-item{
padding:10px;
border-bottom:solid #ddd 1px
}

可以理解为定义了个class，然后在另一个class（.cloud-list-item）中引入，这样就直接把定义的class中的css加入到当前class中了。
2.混合的创建与输出

.cloud-border-bottom{
border-bottom:solid #ddd 1px
}
// 输出Mixins，可以找到class ".cloud-border-bottom"

.cloud-border-bottom(){
border-bottom:solid #ddd 1px
}
// 不输出Mixins，找不到class ".cloud-border-bottom"，减少了代码包大小。
最简单做法：使用less转css，在编译后的文件中，一目了然

但是这两种引用方式，输出结果是一致的
.cloud-list-item{
padding:10px;
.cloud-border-bottom;
}

cloud-list-item{
padding:10px;
.cloud-border-bottom();
}


输出：
//两个输出结果一致
.cloud-list-item{
padding:10px;
border-bottom:solid #ddd 1px
}

3.传参数给Mixins

.cloud-border-radius(@radius){
border-radius:@radius
}
.advator{
width:100px;
height:100px;
.cloud-border-radius(50%)
}

传多个参数：

.cloud-length(@padding:10px;@margin:10px) {
  padding: @padding;
  margin: @margin;
}

  img
  {
    .cloud-border-radius(50%);
    .cloud-length(@margin:10px;20px)
  }
  输出：
img {
    border-radius: 50%;
    padding: 20px;
    margin: 10px;
}

传参时，参数不一定要按照顺序。可以通过名称引用。

4.可以直接将mixin作为参数传递

.cloud-wh(){
  @width:50%;
  @height:60px
}
    .title{
      
        .cloud-wh();
        width: @width;
        display: inline-block;
        height: @height;
    }
输出：
 .title{
 padding: 5px;
    width: 50%;
    display: inline-block;
    height: 60px;
    }