什么是CSS預編譯？

CSS 預編譯，就是預先編譯處理CSS。它擴展了 CSS 語言，增加了變量、Mixin、函數等編程的特性，使 CSS 更易維護和擴展。CSS預編譯的工作原理是提供便捷的語法和特性供開發者編寫源代碼，隨后經過專門的編譯工具將源碼轉化為CSS語法。

它從這幾個方面提升了CSS開發的效率：增強編程能力；增強可復用性；增強可維護性；更便于解決瀏覽器兼容性。

CSS預編譯的核心功能?

不同的預編譯器特性雖然有所差異，但核心功能均圍繞這些目標打造，比如：

• 嵌套（所有預編譯器都支持的語法特性，也是原生CSS最讓開發者頭疼的問題之一）
• 變量（增強了源碼的可編程能力）
• 運算（增強了源碼的可編程能力）
• mixin/繼承（為了解決hack和代碼復用）
• 模塊化（不僅更利于代碼復用，同時也提高了源碼的可維護性）

為什么要用CSS預編譯？

1.CSS的缺點：

• 語法不夠強大，比如無法嵌套書寫，導致模塊化開發中需要書寫很多重復的選擇器；
• 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。

2.CSS預編譯的優點：

• 可以提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了開發效率。

CSS預編譯的缺點

?CSS的好處在于簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓我們開發工作流中多了一個環節，調試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。

CSS和CSS預編譯的比較

?優點缺點CSSCSS預編譯

簡便、可隨時隨地被使用和調試	語法不夠強大，模塊化開發中需要書寫很多重復的選擇器； 沒有變量和合理的樣式復用機制，難以維護。
提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性	調試更麻煩； 容易造成后代選擇器的濫用

主流CSS預編譯器的介紹

目前css主流預處理器是Sass、Less和Stylus，最早的CSS預編譯器是2007年起源于Ruby on Rails社區的SASS，目前比較流行的其他CSS預編譯器如Less、Stylus的誕生都一定程度上受到了SASS的影響和啟發。

1.Sass

2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社區的支持和compass這一最強大的CSS框架，目前受LESS影響，已經進化到了全面兼容CSS的SCSS。
其實現在的Sass已經有了兩套語法規則：一個依舊是用縮進作為分隔符來區分代碼塊的；另一套規則和CSS一樣采用了大括號（｛｝）作為分隔符。后一種語法規則又名SCSS，在Sass3之后的版本都支持這種語法規則。

Sass中文文檔：http://sass.bootcss.com/

2.Less

2009年出現，受SASS的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手，在ruby社區之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優點是簡單和兼容CSS，反過來也影響了SASS演變到了SCSS的時代，著名的Twitter Bootstrap就是采用LESS做底層語言的。

Less中文文檔：https://less.bootcss.com/

3.Stylus

2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS
Stylus被稱為是一種革命性的新語言，提供一個高效、動態、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。

Stylus官方文檔：http://stylus-lang.com/
Stylus 中文文檔：https://www.zhangxinxu.com/jq/stylus/

比較

?優點缺點sasslessstylus

用戶多，更容易找到會用scss的開發，更容易找到scss的學習資源； 可編程能力比較強，支持函數，列表，對象，判斷，循環等； 相比less有更多的功能； Bootstrap/Foundation等使用scss； 豐富的sass庫：Compass/Bourbon；	安裝node-sass會經常失敗或者報錯，需要使用cnpm或者手工安裝
可以在瀏覽器中運行，實現主題定制功能；	編程能力弱，不直接支持對象，循環，判斷等； @variable 變量命名和css的@import/media/keyframes等含義容易混淆； mixin/extend的語法比較奇怪； mixin的參數如果遇到多參數和列表參數值的時候容易混淆；
來自NodeJS社區，所以和NodeJS走得很近，與JavaScript聯系非常緊密。還有專門JavaScript API： http://learnboost.github.io/stylus/docs/js.html 支持Ruby之類等等框架3.更多更強大的支持和功能	人氣不高，教程較少

?Sass看起來在提供的特性上占有優勢，但是LESS能夠讓開發者平滑地從現存CSS文件過渡到LESS，而不需要像Sass那樣需要將CSS文件轉換成Sass格式。Stylus功能上更為強壯，和js聯系更加緊密。

總結

以上是生活随笔為你收集整理的css预编译的优缺点的全部內容，希望文章能夠幫你解決所遇到的問題。

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