LESS 學習整理總結

標籤：

LESS 學習整理總結

在學習LESS之前，先瞭解是如何作用的。 LESS可以運行在NodeJS 瀏覽器等平台上，有許多第三方工具可以編譯LESS，推薦使用SimpLESS，這一直接吧LESS檔案編程成為CSS檔案，快捷方便。 LESS是一門CSS預先處理語言，它擴充了CSS語言，增加了變數，混合（MIxin），函數等功能，讓CSS從一行行的描述變成了可編譯，使其維護成本更低更方便。 LESS的學習成本也很低，只要熟悉CSS語言以及有編程基礎，即可輕鬆上手。

編寫的檔案的副檔名為.less。

1.匯入  LESS可以匯入.less檔案，樣本如下：  

　　 @import "lessName";  

2.變數  通過@變數名的方式聲明變數。  

 2.1 一般值變數

　　 @link-color:red; //此處聲明  

　　 .class{  color:@link-color; //此處使用  

　　　　}

 2.2 選擇符變數    

　　@mySelector:banner;    

　　[email protected]{mySelector}{  /* some CSS */  }  

　　等於

　　 .banner{  /* some CSS */  }

 2.3 URL變數    

　　@images:"../image";  

　　 .class{  background-image:url("@{images}/aa.jpg");  }  

2.4 屬性變數    

　　@property:color;    

　　.class{  [email protected]{property}:red;  }   

 2.5 變數名

　　 @name1:"somesome";  

　　@name2;"name1";  

　　content:@@name2;==content:"somesome";      

3 混合 mixin    

什麼是混合，就是聲明了一個選擇符的屬性之後，可以通過調用選擇符的方式調用這個選擇符中的屬性；    

.class1{  color:red;  }

 .class2{  .class1;//也可使用.class1();  }

 class2的CSS就等於  

.class2{  color:red;  }    

3.1  如果不希望mixin被輸出，在其後邊加一個括弧即可；    

 .class1{  color:red;  }

 .class2(){ //注意後邊帶有括弧  

　　background-color:white;  

}  

.class3{  .class1;  .class2;  }  

實際輸出為：

 .class1{  color:red;  }  

.class3{  

　　color:red;  background-color:white;

 } //注意沒有class2了  

3.2 mixin中還可以包括選擇符    

　　.class1{  &:hover{   content:"hello";  }   }  

　　 .class2{  .class1;   }    

　　實際輸出為：

　　 .class2:hover{  content:"hello";  }  

 3.3 帶參數的mixin(多個參數之間使用分號間隔，可以設定預設值)

　　 .border-radius(@radius){  

　　　　-webkit-border-radius：@radius;  

　　　　-moz-border-radius：@radius;

　　　　 border-radius：@radius;  

　　}

　　 .class1{  .border-radius(6px);  }  

　　實際輸出為：  

　　.class1{  

　　-webkit-border-radius：6px;

　　 -moz-border-radius：6px;

　　 border-radius：6px;  

　　}  

　　 .class1(@color:#232323;@ff:90px){};    

3.4  @arguments 表示所有參數的集合    

　　.box-shadow(@x:0;@y:0;@blur:1px;@color:#000){  

　　-webkit-box-shadow:@arguments;  

　　-moz-box-shadow:@arguments;  

　　box-shadow:@arguments;  };      

　　.class1{  .box-shadow(3px;4px;4px;red);  

　　}    

3.6 Mixin還可以作為函數使用    

　　.mixin(){  @width:100px;  @height:100px;  }  

　　 .class1{  .mixin();  width:@width;  height:@height;  }      

3.7  mixin作為迴圈。  

 4 函數  

　　內建函數部分   

　　4.1  color() 將代表顏色的值轉為字串  color("#aaa"),傳回值為 #aaa 這是一個顏色值;

　　 4.2 convert() 轉換數值單位 支援的單位有 m,cm  mm in pt pc s ms rad deg grad turn等  函數有兩個參數 第一個是帶有單位的浮點數  第二個是要轉成的單位。 convert(12cm,"mm") ==>120mm  

 等等還有很多比較強大的函數。                                        

LESS 學習整理總結