CSS的未來(lái)發(fā)展方向

　　下面是一個(gè)使用@apply規(guī)則的例子：

body { 
 --alert: { 
 color: white; 
 padding: 15px; 
 margin: 1rem 0; 
 border-radius: 6px; 
 }
} 
.alert-success { 
 @apply --alert; 
 background-color: olivedrab;
}
.alert-warning { 
 @apply --alert; 
 background-color: firebrick;
}

　　在寫這篇文章時(shí)(2016年4月8日)，這個(gè)功能仍舊非常新，并沒有被谷歌瀏覽器甚至 Chrome Canary 支持，但是在最新的 Chromium nightly 中通過(guò)啟用標(biāo)記(flag)是可以實(shí)現(xiàn)的。

　　自己來(lái)嘗試@apply規(guī)則的話， 可以先下載最新的Chromium，然后從通過(guò)啟用標(biāo)記來(lái)實(shí)現(xiàn)@apply。下面是在 OS X系統(tǒng)中的做法：

/Applications/Chromium.app/Contents/MacOS/Chromium \ --enable-blink-features=CSSApplyAtRules

　　查看以上規(guī)則所有組合出來(lái)的炫酷樣式，可以參考我的 codepen 演示:

　　@apply 在Chromium瀏覽器上的 Codepen 演示

　從現(xiàn)在開始編寫未來(lái)的的CSS

　　一旦@apply被Chromium 和 Electron所支持，我們就能夠使用原生CSS編寫干凈可維護(hù)的樣式。但在那一天到來(lái)之前，我們?nèi)匀恍枰粩嗟貙W(xué)習(xí)預(yù)處理器來(lái)填補(bǔ)這些空白。

　　現(xiàn)在有至少兩個(gè)項(xiàng)目允許你寫未來(lái)的CSS: Myth 和 cssnext。在這兩個(gè)項(xiàng)目中，cssnext 更加活躍，甚至有一個(gè)專門的git issue來(lái)促進(jìn) @apply 的實(shí)現(xiàn) (譯者注: 最新版本的 postcss-cssnext 已經(jīng)支持 @apply 規(guī)則)。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com