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;

}