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