下面是一个使用@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 规则)。
下载本文