CSS的未來發展方向

　　下面是一個使用@apply規則的例子：

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;
}

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

　　自己來嘗試@apply規則的話， 可以先下載最新的Chromium，然后從通過啟用標記來實現@apply。下面是在 OS X系統中的做法：

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

　　查看以上規則所有組合出來的炫酷樣式，可以參考我的 codepen 演示:

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

　從現在開始編寫未來的的CSS

　　一旦@apply被Chromium 和 Electron所支持，我們就能夠使用原生CSS編寫干凈可維護的樣式。但在那一天到來之前，我們仍然需要不斷地學習預處理器來填補這些空白。

　　現在有至少兩個項目允許你寫未來的CSS: Myth 和 cssnext。在這兩個項目中，cssnext 更加活躍，甚至有一個專門的git issue來促進 @apply 的實現 (譯者注: 最新版本的 postcss-cssnext 已經支持 @apply 規則)。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com