資訊專欄INFORMATION COLUMN
摘要：使用預編譯處理的優(yōu)勢使用預處理器，可以提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。
一、什么是css預編譯處理？
CSS 預編譯處理，從字面上理解，就是預先編譯處理CSS。它擴展了 CSS 語言，增加了變量、Mixin、函數(shù)等編程的特性，使 CSS 更易維護和擴展。CSS預編譯的工作原理是提供便捷的語法和特性供開發(fā)者編寫源代碼，隨后經(jīng)過專門的編譯工具將源碼轉(zhuǎn)化為CSS語法。
CSS預編譯器幾乎成為現(xiàn)如今開發(fā)CSS的標配，它從以下幾個方面提升了CSS開發(fā)的效率：
增強編程能力；
增強可復用性；
增強可維護性；
更便于解決瀏覽器兼容性。
不同的預編譯器特性雖然有所差異，但核心功能均圍繞這些目標打造，比如：
? 嵌套； ? 變量； ? mixin/繼承； ? 運算； ? 模塊化；
嵌套是所有預編譯器都支持的語法特性，也是原生CSS最讓開發(fā)者頭疼的問題之一；
mixin/繼承是為了解決hack和代碼復用；變量和運算增強了源碼的可編程能力；
模塊化的支持不僅更利于代碼復用，同時也提高了源碼的可維護性。
1.CSS有具體以下幾個缺點：
1) 語法不夠強大，比如無法嵌套書寫，導致模塊化開發(fā)中需要書寫很多重復的選擇器； 2) 沒有變量和合理的樣式復用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復輸出，導致難以維護。
2.使用CSS預編譯處理的優(yōu)勢：
使用CSS預處理器，可以提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。大大提高了我們的開發(fā)效率。
3.使用CSS預編譯處理的劣勢：
CSS預處理器也不是萬金油，CSS的好處在于簡便、隨時隨地被使用和調(diào)試。預編譯CSS步驟的加入，讓我們開發(fā)工作流中多了一個環(huán)節(jié)，調(diào)試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。
目前css主流預處理器是Sass、Less和Stylus，最早的CSS預編譯器是2007年起源于Ruby on Rails社區(qū)的SASS，目前比較流行的其他CSS預編譯器如Less、Stylus的誕生都一定程度上受到了SASS的影響和啟發(fā)。
三大框架簡介四、CSS預處理器的選擇
1、Sass：2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社區(qū)的支持和compass這一最強大的css框架，目前受LESS影響，已經(jīng)進化到了全面兼容CSS的SCSS。
其實現(xiàn)在的Sass已經(jīng)有了兩套語法規(guī)則：一個依舊是用縮進作為分隔符來區(qū)分代碼塊的；另一套規(guī)則和CSS一樣采用了大括號（｛｝）作為分隔符。后一種語法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語法規(guī)則。2、Less：2009年出現(xiàn)，受SASS的影響較大，但又使用CSS的語法，讓大部分開發(fā)者和設(shè)計師更容易上手，在ruby社區(qū)之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優(yōu)點是簡單和兼容CSS，反過來也影響了SASS演變到了SCSS的時代，著名的Twitter Bootstrap就是采用LESS做底層語言的。
3、Stylus：2010年產(chǎn)生，來自Node.js社區(qū)，主要用來給Node項目進行CSS預處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS
Stylus被稱為是一種革命性的新語言，提供一個高效、動態(tài)、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規(guī)樣式書寫規(guī)則。
1、Sass
優(yōu)點
1) 用戶多，更容易找到會用scss的開發(fā)，更容易找到scss的學習資源； 2) 可編程能力比較強，支持函數(shù)，列表，對象，判斷，循環(huán)等； 3) 相比less有更多的功能； 4) Bootstrap/Foundation等使用scss； 5) 豐富的sass庫：Compass/Bourbon；
缺點
安裝node-sass會經(jīng)常失敗或者報錯，需要使用cnpm或者手工安裝
2、Less
優(yōu)點：
可以在瀏覽器中運行，實現(xiàn)主題定制功能；
缺點：
編程能力弱，不直接支持對象，循環(huán)，判斷等； @variable 變量命名和css的@import/media/keyframes等含義容易混淆； mixin/extend的語法比較奇怪； mixin的參數(shù)如果遇到多參數(shù)和列表參數(shù)值的時候容易混淆；
3、Stylus
優(yōu)點：
來自NodeJS社區(qū)，所以和NodeJS走得很近，與JavaScript聯(lián)系非常緊密。還有專門JavaScript API： http://learnboost.github.io/stylus/docs/js.html 支持Ruby之類等等框架3.更多更強大的支持和功能
缺點：
人氣不高和教程較少
總結(jié)：
Sass看起來在提供的特性上占有優(yōu)勢，但是LESS能夠讓開發(fā)者平滑地從現(xiàn)存CSS文件過渡到LESS，而不需要像Sass那樣需要將CSS文件轉(zhuǎn)換成Sass格式。Stylus功能上更為強壯，和js聯(lián)系更加緊密。
Sass中文文檔：http://sass.bootcss.com/
Less中文文檔：https://less.bootcss.com/
Stylus官方文檔：http://stylus-lang.com/
Stylus 中文文檔：https://www.zhangxinxu.com/jq...
如果你覺得這篇文章對你有所幫助，那就順便點個贊吧，點點關(guān)注不迷路~
黑芝麻哇，白芝麻發(fā)，黑芝麻白芝麻哇發(fā)哈！
前端哇發(fā)哈
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117359.html
摘要：上面的命令會將編譯的傳遞給，你可以將它保存到一個文件中除了上面的命令轉(zhuǎn)譯源文件之外，現(xiàn)在還有很多第三方開發(fā)的工具，例如是一個前端預處理器語言圖形編譯工具，支持，幫助開發(fā)者更高效地使用它們進行開發(fā)。 一、Sass、LESS和Stylus的安裝 1.Sass的安裝 Sass是Ruby語言寫的，但是兩者的語法沒有關(guān)系。不懂Ruby，照樣可以正常使用Sass。只是必須先安裝Ruby，然后再安裝...
摘要：值得慶幸的是，這三款預處理器語言的語法和語法都差不多。在這一節(jié)中，我們依次來對比一下這三款預處理器語言各種特性的異同之處，以及使用方法。預處理器語言支持任何變量例如顏色數(shù)值文本。 一、Sass、LESS和Stylus的語法 每一種語言都有自己一定的語法規(guī)則，CSS預處理器語言也不例外，在真正使用CSS預處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠上寒山石徑...
摘要：正在暑假中的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。原理微信熱更新方案漲知識了，熱更新是以后的標配。 正在暑假中的《課多周刊》(第1期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大的動力。 遠上寒山石徑...
摘要：為了解決問題，推出了服務(wù)端預渲染，以便提高對優(yōu)化。應用，到了，單頁面應用優(yōu)秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染。客戶端接收數(shù)據(jù)，然后完成最終渲染。通過對客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...
閱讀 1464·2021-11-25 09:43
閱讀 2604·2021-09-24 10:30
閱讀 3672·2021-09-06 15:02
閱讀 3612·2019-08-30 15:55
閱讀 3310·2019-08-30 15:53
閱讀 1706·2019-08-30 15:52
閱讀 2152·2019-08-30 14:21
閱讀 2020·2019-08-30 13:55
