LESS

 Less：

基於CSS的一種擴展技術，包含變量、混合、函數、運算，能夠簡化CSS代碼，下降維護成本。必須經過解析器將less文件轉換爲css文件供頁面使用。

一、  步驟

新建一個文件夾，在文件夾裏新建html、less文件（至始至終不會創建CSS文件）

啓動Koala

配置路徑

在less文件裏寫內容，刷新koala軟件會自動生成css文件

在html裏引入生成的css文件

在less裏也能夠引入文件，用@import

二、  變量

@名稱:值

屬性名：@名稱

@border:1px solid black;

@background:green;

@outline:1px solid black;

 

div{

  border:@border;

  background: @background;

}

 

三、混合Mixins(針對通用的屬性集,多個不一樣屬性)，.名稱{屬性名+屬性值（聲明）}

////任何 CSS class, id 或者 元素 屬性集均可以以一樣的方式引入。

////class屬性集

.widthHeight{

  width: 200px;

  height: 200px;

}

////id屬性集

#fontsize{

  font-size: 30px;

}

 

//元素屬性集

div{

  font-weight: bolder;

}

 

 

div{

  .widthHeight;

  #fontsize;

}

 

//

四、帶參數的混合(調用多個參數，值可變,屬性集合)，.名稱（參數）{屬性名：參數}

////調用參數

.backgroundUrl(@url){

  background: @url;

}

五、給參數設置默認值

.borderRadius(@length:10px){

  border-radius: @length;

  -webkit-border-radius: @length;

  -moz-border-radius: @length;

}

 

div{

  .backgroundUrl(url("1.jpg"));

  .borderRadius;

}

 

六、不帶參數的屬性集

//

.pAll(){

  font-size: 40px;

  color: #0000FF;

  font-weight: bolder;

  border: 1px solid black;

  width: 100px;

  height: 100px;

}

 

p{

  .pAll;

}

//

七、多參數混合

////使用逗號做爲參數分隔符意味着能夠將逗號分隔的一組值做爲一個變量處理。換句話說，若是編譯器在混合的定義或者是調用中找到至少一個分號，就會假設參數是使用分號分隔的，全部的逗號都屬於參數中的一組值的分隔符。

////2個參數，每一個參數都含有經過逗號分隔的一組值的狀況：.name(1, 2, 3; something, else)。

////3個參數，每一個參數只含一個數字的狀況：.name(1, 2, 3)。

////   使用一個象徵性的分號能夠建立一個只含一個參數，但參數包含一組值的混合：.name(1, 2, 3;)。

////    逗號分隔的一組值參數的默認值：.name(@param1: red, blue;)。

////   使用一樣的名字和一樣數量的參數定義多個混合是合法的。在被調用時，LESS會應用到全部能夠應用的混合上。好比你調用混合時只傳了一個參數.mixin(green)，那麼全部只強制要求一個參數的混合都會被調用：

//

//

////多參數混合

.mixin(@margin;@padding){

  margin: @margin;

  padding: @padding;

}

p{

  .mixin(50px;100px)

}