CSS 預處理器

為什麼要有 CSS 預處理器

CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼裡，CSS是很頭痛的事情，它並不像其它程序語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來相當的費事，而且代碼難以組織和維護。

很自然的，有人就開始在想，能不能給CSS像其他程序語言一樣，加入一些編程元素，讓CSS能像其他程序語言一樣可以做一些預定的處理。這樣一來，就有了“CSS預處器（CSS Preprocessor）”。

什麼是 CSS 預處理器

• 是 CSS 語言的超集，比CSS更豐滿。

CSS 預處理器定義了一種新的語言，其基本思想是：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。

通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

CSS預處理器技術已經非常成熟，而且也湧現出了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預處理器，那麼“我應該選擇哪種CSS預處理器？”也相應成了最近網上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相比過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。

到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇——我要選擇哪款CSS預處理器。

less 的介紹

less 是一款比較流行的預處理 CSS，支持變量、混合、函數、嵌套、循環等特點。

• 官網
• 中文網（less 文檔）
• Bootstrap網站的 less 文檔
• 推薦文章：http://www.w3cplus.com/css/less

less 的語法

註釋

less 的註釋可以有兩種。

第一種註釋：模板註釋

 // 模板註釋 這裡的註釋轉換成CSS後將會刪除

因為 less 要轉換為 css才能在瀏覽器中使用。轉換成 css 之後，這種註釋會被刪除（畢竟 css 不識別這種註釋）。

第二種註釋：CSS 註釋語法

/* CSS 註釋語法 轉換為CSS後讓然保留 */

總結：如果在less中寫註釋，我們推薦寫第一種註釋。除非是類似於版權等內容，就採用第二種註釋。

定義變量

我們可以把重複使用或經常修改的值定義為變量，在需要使用的地方引用這個變量即可。這樣可以避免很多重複的工作量。

（1）在less文件中，定義一個變量的格式：

@變量名: 變量值; //格式

@bgColor: #f5f5f5; //格式舉例

（2）同時，在 less 文件中引用這個變量。

最終，less文件的完整版代碼如下：

main.less：

// 定義變量
@bgColor: #f5f5f5;

// 引用變量
body{
 background-color: @bgColor;
} 

我們將上面的less文件編譯為 css 文件後（下一段講less文件的編譯），自動生成的代碼如下：

main.css：

body{
 background-color: #f5f5f5;
}

使用嵌套

在 css 中經常會用到子代選擇器，效果可能是這樣的：

.container {
 width: 1024px;
}

.container > .row {
 height: 100%;
}

.container > .row a {
 color: #f40;
}

.container > .row a:hover {
 color: #f50;
}

上面的代碼嵌套了很多層，寫起來很繁瑣。可如果用 less 的嵌套語法來寫這段代碼，就比較簡潔。

嵌套的舉例如下：

main.less:

.container {
 width: @containerWidth; 


 > .row {
 height: 100%;
 a {
 color: #f40;

 &:hover {
 color: #f50;
 }

 }
 }

 div {
 width: 100px;

 .hello {
 background-color: #00f;
 }

 }
}

將上面的less文件編譯為 css 文件後，自動生成的代碼如下：

main.css

.container {
 width: 1024px;
}

.container > .row {
 height: 100%;
}

.container > .row a {
 color: #f40;
}

.container > .row a:hover {
 color: #f50;
}

.container div {
 width: 100px;
}

.container div .hello { 

 background-color: #00f;
}

Mixin

Mixin 的作用是把重複的代碼放到一個類當中，每次只要引用類名，就可以引用到裡面的代碼了，非常方便。

（1）在 less 文件中定義一個類：（將重複的代碼放到自定義的類中）

/* 定義一個類 */
.roundedCorners(@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

上方代碼中，第一行裡面，括號裡的內容是參數：這個參數是缺省值。

（2）在 less 文件中引用上面這個類：

#header {
 .roundedCorners;
}
#footer {
 .roundedCorners(10px);
}

上方代碼中，header 中的引用沒有帶參數，表示參數為缺省值； footer 中的引用帶了參數，那就用這個參數。

Import

在開發階段，我們可以將不同的樣式放到多個文件中，最後通過@import 的方式合併。意思就是，當出現多個 less 文件時，怎麼引用它們。

這個很好理解， css 文件可以有很多個，less文件也可以有很多個。

（1）定義一個被引用的less文件，名為_button1.less：

_button1.less:

.btn{
 line-height: 100px;
 color: @btnColor;
}

PS1：被引用的less文件，我們習慣在前面加下劃線，表示它是部分文件。

PS2：_button1.less裡可以引用main.css裡的自定義變量。

（2）在 main.css 中引用上面的 _button1.less：（代碼的第二行）

main.css：

@btnColor: red;

@import url(`_button1.less:'); //這裡的路徑寫的是相對路徑 


body{
 width: 1024px;
}

將 上面的main.less 編譯為 main.css之後，自動生成的代碼如下：

.btn {
 line-height: 100px;
 color: red;
}

body {
 width: 1024px;
}

內置函數

less 裡有一些內置的函數，這裡講一下 lighten 和 darken 這兩個內置函數。

main.less:

body {
 background-color: lighten(#000, 10%); // 讓黑色變亮 10%
 color: darken(#fff, 10%); // 讓白色變暗 10%
}

將 上面的 main.less 編譯為 main.css 之後，自動生成的代碼如下：

main.css：

body {
 background-color: #1a1a1a;
 color: #e6e6e6;
}

如果還有什麼不懂的，可以看 api 文檔，在上面的第二段附上了鏈接。

在 index.html中直接引用 less.js

• 做法一：寫完 less文件後，將其編譯為 css 文件，然後在代碼中引用css文件。
• 做法二：在代碼中直接用引用 less 文件。

產品上線後，當然是使用做法一，因為做法二會多出編譯的時間。

平時開發或演示demo的時候可以用做法二。

這一段，我們講一下做法二，其實是瀏覽器在本地在線地把 less 文件轉換為 css 文件。

（1）在 less 官網下載 less.js 文件：

把下載好的文件放在工程文件的lib文件夾裡：

（2）在 index.html 中引入 less.js 和我們自己寫的 main.less。位置如下：

copy 紅框那部分的代碼如下：

<link>

我們可以在打開的網頁中，通過控制檯看到效果：

注意，我們要在服務器中打開 html 文件，否則，看不到效果。

這裡也告訴了我們：

不提倡將 less 引入頁面，因為 less 需要編譯，因此你就需要再引入一個less.js, 多了一個HTTP 請求，同時當瀏覽器禁用了 js 你的樣式就不起作用了，less 編譯應該在服務端或使用 grunt 自動編譯。

less 的編譯

less 的編譯指的是將寫好的 less 文件 生成為 css 文件。

less 的編譯，依賴於 NodeJS 環境。因此，我們需要先安裝 NodeJS。

1、安裝 Node.js

去 Node.js的官網下載安裝包：

一路 next 進行安裝。

安裝完成後，配置環境變量：

在 path 變量中追加安裝路徑：;C:\\Program Files\\nodejs。重啟資源管理器，即可生效。

PS：我發現，我安裝的 node.js v8.9.4 版本，已經自動添加了環境變量。

在 cmd 命令行，輸入node.exe -v，可以查看 node.js 的版本。

2、安裝 less 的編譯環境

將 npm.zip 解壓，將解壓後的文件拷貝到路徑C:\\Users\\smyhvae\\AppData\\Roaming\\npm下：

然後重啟資源管理器（或者重啟電腦）。在 cmd 中輸入 lessc，如果能看到下面的效果，說明 less編譯環境安裝成功：

如果你用的是 linux 系統，可以輸入下面的命令安裝：

npm install -g less

3、將 less 文件編譯為 css 文件

在 less 所在的路徑下，輸入 lessc xxx.less，即可編譯成功。或者，如果輸入 lessc xxx.less > ..\\\\xx.css，表示輸出到指定路徑。

參考文章：

https://www.cnblogs.com/qianguyihao/p/8476602.html

閱讀更多 前端在路上 的文章

關鍵字: 設計師 設計