下面是一個使用@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 演示
一旦@apply被Chromium 和 Electron所支持,我們就能夠使用原生CSS編寫干凈可維護的樣式。但在那一天到來之前,我們仍然需要不斷地學習預處理器來填補這些空白。
現在有至少兩個項目允許你寫未來的CSS: Myth 和 cssnext。在這兩個項目中,cssnext 更加活躍,甚至有一個專門的git issue來促進 @apply 的實現 (譯者注: 最新版本的 postcss-cssnext 已經支持 @apply 規則)。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com