CSS預處理技術總結（一）Less

css預處理技術已經發展的比較成熟了，通過css預處理技術可以很好的提公升css的程式設計性，提高css**的開發效率和可維護性，目前比較熱門的相關技術有sass、less css、stylus、compass等，最近也陸續在專案中用到了這些技術，所以就來個總結吧，本文為系列文章第二篇，主要討論less。

相比sass而言,less要簡單易上手一些，但是程式設計性較sass而言，略有不足，所以也有人說它更適合設計師學習，但這並不妨礙它的廣泛使用，因為less本身的語法就已經很夠用了，twitter大名鼎鼎的bootstrap專案就是基於less構建而成，以下是前端專案中經常會用到的一些less語法：

less注釋一,會被編譯到css

/**/

less注釋二,不會被編譯到css,建議之後只維護less,所以可多用這種注釋

//

定義變數用 @變數名:變數值; 使用該變數值時用 @變數名

@width:
300px;
body
.div1

混合可以將乙個定義好的class a輕鬆的引入到另乙個class b中，從而簡單實現class b繼承class a中的所有屬性。還可以帶引數地呼叫。

比如定義乙個樣式類.border,直接用到另乙個樣式類.box裡,另乙個樣式類就很方便的具有了這個類的樣式,很好的實現了css**的復用;

再比如有乙個.box2,它和.box有一些屬性相同,那就直接繼承.box再做特定的修改即可：

.border .box

.box2

混合（mixin）:可帶引數,以實現傳入變數引數來用同乙個樣式類生成各種不同的樣式：

.border2(@border_width) 
.box3 
.box4

混合（mixin）引數可帶預設值(多個引數之間使用逗號隔開)

.border3(@border_width2:5px) 
.box5

一些常見的相容性寫法就可以用混合封裝起來進行簡化:

.border_radius(@border_radius:2px)

有些情況想根據傳入的引數來改變混合的預設呈現,比如：

下面通過less模式匹配,定義不同樣式模式的三角(top模式和bottom模式),但無論哪種模式,@_(放在模式引數位置)定義的樣式所有模式都公有。

.********(@_,@w,@c) 
.********(top,@w,@c) 
.********(bottom,@w,@c) 
.********2 
.********3

@box_width:
100px;
.box6

可以在乙個選擇器中直接巢狀另乙個選擇器來實現繼承，這樣很大程度減少了**量，並且**看起來結構更加清晰：

.list1 
height
: 20px;
a       &:hover 
}}}

@arguments包含了所有傳遞進來的引數. 如果你不想單獨處理每乙個引數的話就可以像這樣寫:

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

有時候需要輸出一些不正確的css語法或者使用一些 less不認識的專有語法.

//要輸出這樣的值我們可以在字串前加上乙個 ~, 例如:

.class1

1 完整的less中文文件：

作者 @浩時代

2016.07.25

CSS預處理技術總結（一）Less

Css預處理器 Less 知識總結

css預處理器 less

css預處理器 less

CSS預處理技術總結（一）Less

Css預處理器 Less 知識總結

css預處理器 less

css預處理器 less

相關推薦