為什么80%的碼農都做不了架構師？>>> ??

原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

簡介

CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被廣泛應用于萬維網（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。

作為一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼，造成這些困難的很大原因源于 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。LESS 為 Web 開發者帶來了福音，它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。

回頁首

LESS 原理及使用方式

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 文件。LESS 并沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性。下面是一個簡單的例子：

清單 1. LESS 文件

@color: #4D926F; #header { color: @color; } h2 { color: @color; }

經過編譯生成的 CSS 文件如下：

清單 2. CSS 文件

#header { color: #4D926F; } h2 { color: #4D926F; }

從上面的例子可以看出，學習 LESS 非常容易，只要你了解 CSS 基礎就可以很容易上手。

LESS 可以直接在客戶端使用，也可以在服務器端使用。在實際項目開發中，我們更推薦使用第三種方式，將 LESS 文件編譯生成靜態 CSS 文件，并在 HTML 文檔中應用。

客戶端

我們可以直接在客戶端使用 .less（LESS 源文件），只需要從 http://lesscss.org下載 less.js 文件，然后在我們需要引入 LESS 源文件的 HTML 中加入如下代碼：

<link rel="stylesheet/less" type="text/css" href="styles.less">

LESS 源文件的引入方式與標準 CSS 文件引入方式一樣：

<link rel="stylesheet/less" type="text/css" href="styles.less">

需要注意的是：在引入 .less 文件時，rel 屬性要設置為“stylesheet/less”。還有更重要的一點需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，這樣才能保證 LESS 源文件正確編譯解析。

服務器端

LESS 在服務器端的使用主要是借助于 LESS 的編譯器，將 LESS 源文件編譯生成最終的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安裝 LESS，安裝成功后就可以在 node 環境中對 LESS 源文件進行編譯。

在項目開發初期，我們無論采用客戶端還是服務器端的用法，我們都需要想辦法將我們要用到的 CSS 或 LESS 文件引入到我們的 HTML 頁面或是橋接文件中，LESS 提供了一個我們很熟悉的功能— Importing。我們可以通過這個關鍵字引入我們需要的 .less 或 .css 文件。 如：

@import “variables.less”;

.less 文件也可以省略后綴名，像這樣：

@import “variables”;

引入 CSS 同 LESS 文件一樣，只是 .css 后綴名不能省略。

使用編譯生成的靜態 CSS 文件

我們可以通過 LESS 的編譯器，將 LESS 文件編譯成為 CSS 文件，在 HTML 文章中引入使用。這里要強調的一點，LESS 是完全兼容 CSS 語法的，也就是說，我們可以將標準的 CSS 文件直接改成 .less 格式，LESS 編譯器可以完全識別。

回頁首

語法

變量

LESS 允許開發者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。

我們可以從下面的代碼了解變量的使用及作用：

清單 3 LESS 文件

@border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }

經過編譯生成的 CSS 文件如下：

清單 4. CSS 文件

.mythemes tableBorder { border: 1px solid #b5bcc7; }

從上面的代碼中我們可以看出，變量是 VALUE（值）級別的復用，可以將相同的值定義成變量統一管理起來。

該特性適用于定義主題，我們可以將背景顏色、字體顏色、邊框屬性等常規樣式進行統一定義，這樣不同的主題只需要定義不同的變量文件就可以了。當然該特性也同樣適用于 CSS RESET（重置樣式表），在 Web 開發中，我們往往需要屏蔽瀏覽器默認的樣式行為而需要重新定義樣式表來覆蓋瀏覽器的默認行為，這里可以使用 LESS 的變量特性，這樣就可以在不同的項目間重用樣式表，我們僅需要在不同的項目樣式表中，根據需求重新給變量賦值即可。

LESS 中的變量和其他編程語言一樣，可以實現值的復用，同樣它也有生命周期，也就是 Scope（變量范圍，開發人員慣稱之為作用域），簡單的講就是局部變量還是全局變量的概念，查找變量的順序是先在局部定義中找，如果找不到，則查找上級定義，直至全局。下面我們通過一個簡單的例子來解釋 Scope。

清單 5. LESS 文件

@width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此處應該取最近定義的變量 width 的值 30px } } #leftDiv { width : @width; // 此處應該取最上面定義的變量 width 的值 20px }

經過編譯生成的 CSS 文件如下：

清單 6. CSS 文件

#homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }

Mixins（混入）

Mixins（混入）功能對用開發者來說并不陌生，很多動態語言都支持 Mixins（混入）特性，它是多重繼承的一種實現，在 LESS 中，混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS，就像在當前 CLASS 中增加一個屬性一樣。

我們先簡單看一下 Mixins 在 LESS 中的使用：

清單 7. LESS 文件

// 定義一個樣式選擇器.roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的樣式選擇器中使用#header { .roundedCorners; } #footer { .roundedCorners(10px); }

經過編譯生成的 CSS 文件如下：

清單 8. CSS 文件

#header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

從上面的代碼我們可以看出：Mixins 其實是一種嵌套，它允許將一個類嵌入到另外一個類中使用，被嵌入的類也可以稱作變量，簡單的講，Mixins 其實是規則級別的復用。

Mixins 還有一種形式叫做 Parametric Mixins（混入參數），LESS 也支持這一特性：

清單 9. LESS 文件

// 定義一個樣式選擇器.borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定義的樣式選擇器#header { .borderRadius(10px); // 把 10px 作為參數傳遞給樣式選擇器} .btn { .borderRadius(3px);// // 把 3px 作為參數傳遞給樣式選擇器}

經過編譯生成的 CSS 文件如下：

清單 10. CSS 文件

#header { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .btn { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

我們還可以給 Mixins 的參數定義一人默認值，如

清單 11. LESS 文件

.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius; }

經過編譯生成的 CSS 文件如下：

清單 12. CSS 文件

.btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

像 JavaScript 中 arguments一樣，Mixins 也有這樣一個變量：@arguments。@arguments 在 Mixins 中具是一個很特別的參數，當 Mixins 引用這個參數時，該參數表示所有的變量，很多情況下，這個參數可以省去你很多代碼。

清單 13. LESS 文件

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px,2px,3px,#f36); }

經過編譯生成的 CSS 文件如下：

清單 14. CSS 文件

#header { -moz-box-shadow: 2px 2px 3px #FF36; -webkit-box-shadow: 2px 2px 3px #FF36; box-shadow: 2px 2px 3px #FF36; }

Mixins 是 LESS 中很重要的特性之一，我們這里也寫了很多例子，看到這些例子你是否會有這樣的疑問：當我們擁有了大量選擇器的時候，特別是團隊協同開發時，如何保證選擇器之間重名問題？如果你是 java 程序員或 C++ 程序員，我猜你肯定會想到命名空間 Namespaces，LESS 也采用了命名空間的方法來避免重名問題，于是乎 LESS 在 mixins 的基礎上擴展了一下，看下面這樣一段代碼：

清單 15. LESS 文件

#mynamespace { .home {...} .user {...} }

這樣我們就定義了一個名為 mynamespace 的命名空間，如果我們要復用 user 這個選擇器的時候，我們只需要在需要混入這個選擇器的地方這樣使用就可以了。#mynamespace > .user。

嵌套的規則

在我們書寫標準 CSS 的時候，遇到多層的元素嵌套這種情況時，我們要么采用從外到內的選擇器嵌套定義，要么采用給特定元素加 CLASS 或 ID 的方式。在 LESS 中我們可以這樣寫：

清單 16. HTML 片段

<div id="home"> <div id="top">top</div> <div id="center"> <div id="left">left</div> <div id="right">right</div> </div> </div>

清單 17. LESS 文件

#home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } }

經過編譯生成的 CSS 文件如下：

清單 18. CSS 文件

#home { color: blue; width: 600px; height: 500px; border: outset; } #home #top { border: outset; width: 90%; } #home #center { border: outset; height: 300px; width: 90%; } #home #center #left { border: outset; float: left; width: 40%; } #home #center #right { border: outset; float: left; width: 40%; }

從上面的代碼中我們可以看出，LESS 的嵌套規則的寫法是 HTML 中的 DOM 結構相對應的，這樣使我們的樣式表書寫更加簡潔和更好的可讀性。同時，嵌套規則使得對偽元素的操作更為方便。

清單 19. LESS 文件

a { color: red; text-decoration: none; &:hover {// 有 & 時解析的是同一個元素或此元素的偽類，沒有 & 解析是后代元素color: black; text-decoration: underline; } }

經過編譯生成的 CSS 文件如下：

清單 20. CSS 文件

a { color: red; text-decoration: none; } a:hover { color: black; text-decoration: underline; }

運算及函數

在我們的 CSS 中充斥著大量的數值型的 value，比如 color、padding、margin 等，這些數值之間在某些情況下是有著一定關系的，那么我們怎樣利用 LESS 來組織我們這些數值之間的關系呢？我們來看這段代碼：

清單 21 . LESS 文件

@init: #111111; @transition: @init*2; .switchColor { color: @transition; }

經過編譯生成的 CSS 文件如下：

清單 22. CSS 文件

.switchColor { color: #222222; }

上面的例子中使用 LESS 的 operation 是 特性，其實簡單的講，就是對數值型的 value（數字、顏色、變量等）進行加減乘除四則運算。同時 LESS 還有一個專門針對 color 的操作提供一組函數。下面是 LESS 提供的針對顏色操作的函數列表：

lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%);// return a color 10% *less* saturated than @color fadein(@color, 10%); // return a color 10% *less* transparent than @color fadeout(@color, 10%); // return a color 10% *more* transparent than @color spin(@color, 10); // return a color with a 10 degree larger in hue than @color spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: 上述代碼引自 LESS CSS 官方網站，詳情請見 http://lesscss.org/#-color-functions

使用這些函數和 JavaScript 中使用函數一樣。

清單 23 LESS 文件

init: #f04615; #body { background-color: fadein(@init, 10%); }

經過編譯生成的 CSS 文件如下：

清單 24. CSS 文件

#body { background-color: #f04615; }

從上面的例子我們可以發現，這組函數像極了 JavaScript 中的函數，它可以被調用和傳遞參數。這些函數的主要作用是提供顏色變換的功能，先把顏色轉換成 HSL 色，然后在此基礎上進行操作，LESS 還提供了獲取顏色值的方法，在這里就不舉例說明了。

LESS 提供的運算及函數特性適用于實現頁面組件特性，比如組件切換時的漸入漸出。

Comments（注釋）

適當的注釋是保證代碼可讀性的必要手段，LESS 對注釋也提供了支持，主要有兩種方式：單行注釋和多行注釋，這與 JavaScript 中的注釋方法一樣，我們這里不做詳細的說明，只強調一點：LESS 中單行注釋 (// 單行注釋 ) 是不能顯示在編譯后的 CSS 中，所以如果你的注釋是針對樣式說明的請使用多行注釋。

LESS VS SASS

同類框架還有 SASS : http://sass-lang.com/, 與 LESS 相比，兩者都屬于 CSS 預處理器，功能上大同小異，都是使用類似程序式語言的方式書寫 CSS, 都具有變量、混入、嵌套、繼承等特性，最終目的都是方便 CSS 的書寫及維護。

LESS 和 SASS 互相促進互相影響，相比之下 LESS 更接近 CSS 語法，更多兩者之間的比較，請參考這篇帖子：https://gist.github.com/674726。

回頁首

結束語

本文提到的只是 LESS 的基本功能，更高級的功能如：字符串插值，服務器端使用配置，JavaScript 表達式，避免編譯等可以參看 LESS 的官方網站。

LESS 以 CSS 語法為基礎，又借用了很多我們熟知編程式語言的特性，這對于我們開發人員來講學習成本幾乎可以忽略，它在保留 CSS 語法的基礎上擴展了更多實用的功能，LESS 為我們提供了一種新的編寫樣式表的方法，我們可以根據我們的項目特性選擇使用 LESS 的部分特性，我們只需用很少的成本就可以換了很大的回報，一句話，Less is more，借助 LESS 可以更便捷的進行 Web 開發。

轉載于:https://my.oschina.net/wzzz/blog/368077

總結

以上是生活随笔為你收集整理的LESS CSS 框架简介(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。