前言

完成《CSS核心技術(shù)與實戰(zhàn)》這本書,已有一個多月了,而這篇文章原本是打算寫在那本書里面的,但本章講解的內(nèi)容,畢竟屬于CSS未來的范疇,而這一切都還不能夠確定下來,所以這一章沒有寫進去,但不管怎么說,多少了解一下還是有好處的,里面部分功能,有些瀏覽器已經(jīng)實現(xiàn)了。

如果你對CSS預處理器感興趣,那么本篇文章也許很適合你。

初學CSS預處理器,其實我是不太明白為什么需要用這種東西的,后來想明白一件事,一切都是為了可維護性。比如下面這幅圖

大數(shù)據(jù)培訓,云培訓,數(shù)據(jù)挖掘培訓,云計算培訓,高端軟件開發(fā)培訓,項目經(jīng)理培訓

距離左邊有一點點間距,而其他元素設(shè)置的間距往往也是一樣的,但如果不使用預處理器,或許我們會這樣寫

.box{ padding:12px;
}.footer{ padding:12px;
}
....{ padding:12px;
}

但這種問題是,如果需要更改所有間距,你不得不誒個去替換,這樣帶來了很多不必要的工作量,如果使用預處理器就好辦了,因為預處理器是允許你使用變量的,你可以像編程語言那樣,定義一個全局變量,在需要的地方,引用這個全局變量,更改的時候,只需要修改一處就好了,假設(shè)代碼如下:

var pad = 2px;
.box{
 padding:pad;
}
.footer{
 padding:pad;
}

也就是說預處理器很大一部分就是為了解決可維護性,本章講解的是后處理器。

那么后處理器和預處理器有什么區(qū)別

你可以這樣理解,后處理器就好比動態(tài)語言,而預處理器就好比靜態(tài)語言。預

網(wǎng)友評論