CSS
預編譯處理,從字面上理解,就是預先編譯處理CSS
。它擴展了 CSS
語言,增長了變量、Mixin、函數等編程的特性,使 CSS
更易維護和擴展。CSS
預編譯的工做原理是提供便捷的語法和特性供開發者編寫源代碼,隨後通過專門的編譯工具將源碼轉化爲CSS
語法。CSS
預編譯器幾乎成爲現現在開發CSS
的標配,它從如下幾個方面提高了CSS
開發的效率:css
不一樣的預編譯器特性雖然有所差別,但核心功能均圍繞這些目標打造,好比:html
• 嵌套; • 變量; • mixin/繼承; • 運算; • 模塊化;
嵌套是全部預編譯器都支持的語法特性,也是原生CSS最讓開發者頭疼的問題之一;
mixin/繼承是爲了解決hack和代碼複用;變量和運算加強了源碼的可編程能力;
模塊化的支持不只更利於代碼複用,同時也提升了源碼的可維護性。前端
1.CSS有具體如下幾個缺點:node
1) 語法不夠強大,好比沒法嵌套書寫,致使模塊化開發中須要書寫不少重複的選擇器; 2) 沒有變量和合理的樣式複用機制,使得邏輯上相關的屬性值必須以字面量的形式重複輸出,致使難以維護。
2.使用CSS預編譯處理的優點:git
使用CSS預處理器,能夠提供 CSS 缺失的樣式層複用機制、減小冗餘代碼,提升樣式代碼的可維護性。大大提升了咱們的開發效率。
3.使用CSS預編譯處理的劣勢:
CSS預處理器也不是萬金油,CSS的好處在於簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入,讓咱們開發工做流中多了一個環節,調試也變得更麻煩了。更大的問題在於,預編譯很容易形成後代選擇器的濫用。因此咱們在實際項目中衡量預編譯方案時,仍是得想一想,比起帶來的額外維護開銷,CSS預處理器有沒有解決更大的麻煩。github
Sass
、Less
和Stylus
目前css主流預處理器是Sass
、Less
和Stylus
,最先的CSS預編譯器是2007年起源於Ruby on Rails社區的SASS
,目前比較流行的其餘CSS預編譯器如Less
、Stylus
的誕生都必定程度上受到了SASS的影響和啓發。npm
三大框架簡介
一、Sass
:2007年誕生,最先也是最成熟的CSS預處理器,擁有ruby社區的支持和compass這一最強大的css框架,目前受LESS
影響,已經進化到了全面兼容CSS的SCSS
。
其實如今的Sass
已經有了兩套語法規則:一個依舊是用縮進做爲分隔符來區分代碼塊的;另外一套規則和CSS同樣採用了大括號({})做爲分隔符。後一種語法規則又名SCSS
,在Sass3以後的版本都支持這種語法規則。二、
Less
:2009年出現,受SASS
的影響較大,但又使用CSS
的語法,讓大部分開發者和設計師更容易上手,在ruby社區以外支持者遠超過SASS
,其缺點是比起SASS
來,可編程功能不夠,不過優勢是簡單和兼容CSS,反過來也影響了SASS演變到了SCSS的時代,著名的Twitter Bootstrap就是採用LESS
作底層語言的。編程三、
Stylus
:2010年產生,來自Node.js社區,主要用來給Node項目進行CSS預處理支持,在此社區以內有必定支持者,在普遍的意義上人氣還徹底不如SASS和LESS
Stylus被稱爲是一種革命性的新語言,提供一個高效、動態、和使用表達方式來生成CSS,以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。瀏覽器
一、Sass
優勢sass
1) 用戶多,更容易找到會用scss的開發,更容易找到scss的學習資源; 2) 可編程能力比較強,支持函數,列表,對象,判斷,循環等; 3) 相比less有更多的功能; 4) Bootstrap/Foundation等使用scss; 5) 豐富的sass庫:Compass/Bourbon;
缺點
安裝node-sass會常常失敗或者報錯,須要使用cnpm或者手工安裝
二、Less
優勢:
能夠在瀏覽器中運行,實現主題定製功能;
缺點:
編程能力弱,不直接支持對象,循環,判斷等; @variable 變量命名和css的@import/media/keyframes等含義容易混淆; mixin/extend的語法比較奇怪; mixin的參數若是遇到多參數和列表參數值的時候容易混淆;
三、Stylus
優勢:
來自NodeJS社區,因此和NodeJS走得很近,與JavaScript聯繫很是緊密。還有專門JavaScript API: http://learnboost.github.io/stylus/docs/js.html 支持Ruby之類等等框架3.更多更強大的支持和功能
缺點:
人氣不高和教程較少
總結:
Sass看起來在提供的特性上佔有優點,可是LESS可以讓開發者平滑地從現存CSS文件過渡到LESS,而不須要像Sass那樣須要將CSS文件轉換成Sass格式。Stylus功能上更爲強壯,和js聯繫更加緊密。
Sass中文文檔: http://sass.bootcss.com/
Less中文文檔: https://less.bootcss.com/
Stylus官方文檔: http://stylus-lang.com/
Stylus 中文文檔: https://www.zhangxinxu.com/jq...
若是你以爲這篇文章對你有所幫助,那就順便點個贊吧,點點關注不迷路~
黑芝麻哇,白芝麻發,黑芝麻白芝麻哇發哈!
前端哇發哈