less学习笔记

@charset "utf8";

//less中的注释

/*会被编译到css文件中*/

//不会被编译到css文件中

//变量 @变量名:变量值

@borderW: 15px;

body{

  border: @borderW;

}

//混合

.border(){

  border: 1px solid green;

}

.padding(@padding : 15px){

  padding: @padding;

}

.bg{

  background-color: red;

  .border;

  .padding(16px);

  .margin(top, 20px);

}

//匹配模式

.margin(top, @margin: 15px){

  margin-top: @margin;

}

.margin(bottom, @margin: 20px){

  margin-bottom: @margin;

}

//嵌套规则

.list{

  width: 100px;

  li{

    list-style-type: none;

    a{

      color: red;

      //&表明上一级元素

      &:hover{

        color: green;

      }

    }

  }

  >div{

      color: red;

  }

}

//@arguments变量

.marginA(@maT:10px,@maR:12px,@maB:15px,@maL:20px){

  margin: @arguments;

}

ul{

  .marginA();

}

//避免编译  ~'内容'或者~"内容"

.nav{

  width: 100%;

  height: ~'100px - 50px';

}

//对于带括号的混合 !important

.test{

  .marginA()!important;

}