less的实用用法笔记

第一次写完一个三十个页面的项目，真真切切让我体会到了css组件化的重要性，被各种代码冗余，命名冲突搞得头昏脑涨，趁次做一次总结，下次就学乖了。

1.常用的宽高等

.w(@width:0){    //适用于经常用到的单独样式设置
  width:@width
}
.example {       //写的时候键盘打.w和一个shift就可以输宽度值了
  .w(100px);
}  

2.自定义组件（以按钮为例）

.btn(@color:yellow,@width:30px,@height:20px){  //颜色，宽，高等定义为变量，也可以设置一个默认值
  width: @width;
  height: @height;
  background-color: @color;
  border-radius: 5px;
  text-aligns:center;
}

.button{
    .btn(black,50px,30px)    //自定义一个按钮出来，
}

3.把地址设置成一个常量，修改调试只需该一个地方

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

4.嵌套用&替代父名，修改时只需要动一个parent就可以了

.parent{            //&除了常用的:hover，添加伪类外，命名也很好用
  &-info{           //编译出来是parent-info,不用打父类名
    &-name{
      
    }
  }
}

5.待加载。。。