Less的簡單使用

1.定義變量

@color = #DC3545;

2.樣式複用

(1) 無參數

.box{
  color:@color;
  font-size:15px;
}
.layout{
  .box; /*複用.box的樣式*/
}

(2) 帶參數

.box(@r:10px){
  color:@color;
  font-size:@r;
}
.layout{
  .box; /*不傳入參數默認是10px*/
  /*  .box(15px);  */
}

3. 樣式嵌套

.layout{
  background-color:@color;
  div{
    //...
  }
  > div{
    //...
    li{
      //...
	}
  }
  a{
    &:hover{
      //...
    }
  }
  .slider{
    &::before{
      //...
    }
  }
}

4.less轉css

配置nodejs環境，安裝npm，通過npm安裝lessc，lessc可將less文件轉換成css文件。

5. 直接在項目中使用less文件

直接在項目中使用less文件是無法被識別的，想要這麼做可以在項目中引入 less.js 插件。
直接在項目中使用less還有一個好處就是less文件可以通過@import導入其它less文件，從而達到良好的複用效果。