之前接觸過less+vue,sass+ng2的開發(fā)內(nèi)容,今天偶然看到stylus這個東西刨秆,之前聽都沒聽過凳谦,都不知道怎么讀,故寫這些東西研究下
SASS: 2007年誕生衡未,最早也是最成熟的CSS預(yù)處理器晾蜘,擁有ruby社區(qū)的支持和compass這一最強大的css框架,目前受LESS影響眠屎,已經(jīng)進化到了全面兼容CSS的SCSS剔交。
LESS: 2009年出現(xiàn),受SASS的影響較大改衩,但又使用CSS的語法岖常,讓大部分開發(fā)者和設(shè)計師更容易上手,在ruby社區(qū)之外支持者遠超過SASS葫督,其缺點是比起SASS來竭鞍,可編程功能不夠,不過優(yōu)點是簡單和兼容CSS橄镜,反過來也影響了SASS演變到了SCSS的時代偎快,著名的Twitter Bootstrap就是采用LESS做底層語言的。
Stylus:2010年產(chǎn)生洽胶,來自Node.js社區(qū)晒夹,主要用來給Node項目進行CSS預(yù)處理支持,在此社區(qū)之內(nèi)有一定支持者姊氓,在廣泛的意義上人氣還完全不如SASS和LESS丐怯。
CSS 預(yù)處理器是什么?一般來說翔横,它們基于 CSS 擴展了一套屬于自己的 DSL读跷,來解決我們書寫 CSS 時難以解決的問題:
? ? ? ? === > DSL????? Domain Specific Language? 特定領(lǐng)域下的語言,DSL是為了解決某些特定場景下的任務(wù)而專門設(shè)計的語言
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?與之對應(yīng)的就是通用編程語言,比如Java/C/C++這種
css問題:
語法不夠強大禾唁,比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器效览;
沒有變量和合理的樣式復(fù)用機制,使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出荡短,導(dǎo)致難以維護丐枉。
預(yù)處理器優(yōu)勢:提供 CSS 缺失的樣式層復(fù)用機制、減少冗余代碼肢预,提高樣式代碼的可維護性
參考文章:http://efe.baidu.com/blog/revisiting-css-preprocessors/? ?這個才看了一點點矛洞,有空了好好全都看一遍呀,不能忘了