CSS預(yù)處理器

我們知道移袍，CSS入門簡單但是卻有許多弊端。例如：

1老充、語法不夠強(qiáng)大葡盗，比如無法嵌套書寫，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器啡浊；

2戳粒、沒有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出虫啥，導(dǎo)致難以維護(hù)蔚约；

這就導(dǎo)致了我們在工作中無端增加了許多工作量。為了解決這個(gè)問題涂籽，前端開發(fā)人員需要使用一種稱之為?【CSS 預(yù)處理器】?的工具苹祟。CSS預(yù)處理器就是一種可以將你根據(jù)它的規(guī)則寫出來的格式轉(zhuǎn)成css的東西，CSS預(yù)處理器主要有以下功能：

1评雌、文件切分：把一個(gè)大的 CSS 文件在切分成多個(gè)小文件树枫，實(shí)現(xiàn)初步模塊化

2、選擇符嵌套：避免了書寫大量重復(fù)選擇器景东，減少代碼冗余

3砂轻、設(shè)置變量：實(shí)現(xiàn)樣式復(fù)用，使代碼變得易維護(hù)

4斤吐、可使用運(yùn)算搔涝、函數(shù)等

幾種主流CSS預(yù)處理器分別是Less、Sass和Stylus和措。

Sass：2007年出現(xiàn)庄呈，有兩種語法，分別以 .sass 和 .scss 為擴(kuò)展名派阱∥芰簦基于 Ruby，通過服務(wù)端處理贫母，功能強(qiáng)大文兑。解析效率高。需要學(xué)習(xí) Ruby 語言腺劣，上手難度高于 Less绿贞。

Less：2009年出現(xiàn)，受Sass影響大誓酒，以 .less 為擴(kuò)展名樟蠕。基于 NodeJS靠柑，通過客戶端處理寨辩，使用簡單。功能比 SASS 簡單歼冰，解析效率也低于 SASS靡狞，但在實(shí)際開發(fā)中足夠了。

Stylus：2010年出現(xiàn)隔嫡，來自Node.js社區(qū)甸怕，主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，以 .styl 為擴(kuò)展名腮恩，使用不如Sass和Less廣泛梢杭。

CSS?Module

我們知道組件應(yīng)該相互獨(dú)立，引入一個(gè)組件時(shí)秸滴，應(yīng)該只引入它所需要的 CSS 樣式武契。由于Saas/Less很難實(shí)現(xiàn)對每個(gè)組件都編譯出單獨(dú)的 CSS，所以實(shí)現(xiàn)模塊化只有【CSS預(yù)處理器】是遠(yuǎn)遠(yuǎn)不夠的荡含，還有很多問題沒得到解決咒唆，如下：

1、全局污染谱秽、命名混亂霉赡。

2孝凌、依賴管理不徹底。

3浸船、無法共享變量。

4寝蹈、代碼壓縮不徹底糟袁。

這時(shí)就需要 CSS Modules來解決，它使用JS編譯CSS文件躺盛，使其具備模塊化的能力项戴。

CSS Modules不是將CSS改造的具有編程能力，而是加入了局部作用域槽惫、依賴管理周叮，這恰恰解決了最大的痛點(diǎn)〗缧保可以有效避免全局污染和樣式?jīng)_突仿耽，能最大化地結(jié)合現(xiàn)有 CSS 生態(tài)和 JS 模塊化能力。

CSS Modules的配置也非常簡單各薇，下面以webpack+react為例介紹一下：

因?yàn)閣ebpack 自帶的 css-loader 組件项贺，自帶了 CSS Modules君躺，所以在webpack配置文件（webpack.config.js）中加上【module:?true?即可

在模塊中使用時(shí)我們只需要修改一下css文件的引用方式即可

渲染結(jié)果為：

說明：

CSS Module還是JS和CSS分離的寫法，不會(huì)改變大家的書寫習(xí)慣开缎，CSS Module只需修改構(gòu)建代碼和使用模塊依賴引入className的方式即可使用棕叫，且支持less和sass的語法。

拓展（babel-plugin-react-css-modules）：

babel-plugin-react-css-modules 可以實(shí)現(xiàn)使用styleName屬性自動(dòng)加載CSS模塊奕删。只需要把className換成styleName即可獲得CSS局部作用域的能力