CSS3——前端預處理技術（Less、Sass、CoffeeScript、TypeScript）

1、Less

1.一、概要

Less是一種動態樣式語言，Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

Less 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數。LESS 既能夠在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。 Less是一個JS庫，因此他能夠在客戶端運行，相對Sass則必須在服務端藉助Ruby運行

官網： http://lesscss.org

1.二、解析Less

 

1.2.0、插件安裝

 

a)、先安裝node.js(https://nodejs.org/en/)

b)、安裝less編譯器

c)、安裝插件

1.2.一、插件安裝

可以翻譯Less的工具軟件有很多，這裏介紹：Koala

Koala是一個開源的預處理語言圖形編譯工具，目前已支持Less、Sass、Compass與CoffeeScript。
功能特性：
多語言支持： 支持Less、Sass、Compass與CoffeeScript。
實時監聽與編譯： 在後臺監聽文件的變更，檢測到文件被修改後將自動進行編譯。
編譯選項支持： 能夠設置與自定義你須要的編譯選項。
壓縮支持： Less、Sass可直接編譯生成壓縮後的css代碼。
錯誤提示： 編譯中若是遇到錯誤，Koala將在右下角提示並顯示出具體的出錯地方，方便開發者快速定位。
跨平臺： Windows、Mac、Linux完美支持。
安裝Koala
在Koala官網根據你的系統平臺下載對應的版本。Linux系統要求已安裝好ruby運行環境。

下載地址： http://koala-app.com/

注意：路徑中不要使用中文，切記！

 

 

1.三、變量

語法：@變量名:值;

1)、以@做爲變量的起始標識，變量名由字母、數字、_和-組成
2)、沒有先定義後使用的規定；
3)、以最後定義的值爲最終值；
4)、可用於rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接；
5)、定義時 "@變量名: 變量值;" 的形式；引用時採用 "@變量名" 或 "@{變量名}" 的形式；
6)、存在做用域，局部做用域優先級高於全局做用域。

@width:300px;       //建立變量：@變量名:值
@height:@width/2;

.dox{
    width: @width;      //賦值
    height: @height;
}

@width:200px;       //後寫的會覆蓋先寫的

.dox{
    width: @width;  //屢次解析
}

 

 

編譯後：

.dox {
  width: 200px;
  height: 100px;
}
.dox {
  width: 200px;
}

 

1.四、混入(Mixins)

相似函數或宏

定義函數:函數名(參數1,參數2,...)

參數       :@參數名:默認值

注意：

a)、能夠不使用參數 .wrap(){…} .pre{ .wrap }，也可使用多個參數
b)、內置變量@arguments表明全部參數(運行時)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }

注意，在參數沒有默認值的前提下使用@arguments調用時必須賦值，不然會致使整個頁面內的less語法出錯而失效。
c)、Mixins必須使用ID或者類，即#xx或.xx，不然無效。

Less示例代碼：

/*1.四、混入(Mixins)
* 定義函數:.mixins(參數1,參數2,...)
* 參數 :@參數名:默認值
* */
.mixins(@w:200px,@h:200px,@c:royalblue){
　　width: @w;
　　height: @h;
　　color: @c;
}
.mixins2(@x:0, @y:0, @blur:1px, @color:#000) {
　　box-shadow: @arguments;//@arguments:全部參數
}

/*調用*/
.dox1{
　　.mixins();//默認值
}
.dox2{
　　.mixins(100px,50px,red);//帶參數
}

.dox3{
　　.mixins2(10px,5px,3px,#665544)
}

 

編譯後：

/*
 * 定義函數:.mixins(參數1,參數2,...)
 * 參數       :@參數名:默認值
 * */
/*調用*/
.dox1 {
  width: 200px;
  height: 200px;
  color: royalblue;
}
.dox2 {
  width: 100px;
  height: 50px;
  color: red;
}
.dox3 {
  box-shadow: 10px 5px 3px #665544;
}