在CSS中@apply是什么?

我很好奇CSS指令@apply是做什么的。我在谷歌上搜索了@apply，但我找不到任何可以正确解释它的含义的东西。

这种指令的用途是什么?

简单的解释就是;在CSS中引入变量(这是预处理器的一个特性，比如Sass)，以及类似于函数的行为(也在预处理器中)的mixin。

假设——header-theme是一个函数(mixin):

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

这样，您就可以在许多不同的地方使用它，而不必再次重写它(DRY)。

现在变量部分可以用这个例子来解释:

:root {
  --brand-color: red; /* Default value */
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green;
  @apply --header-theme;
}

mixin将有一个变量发送给它并改变颜色。

这不是该特性的限制，您可以使用它做更多的事情。你可以阅读更多关于Sass中mixin和变量的其他使用方法，之后我建议你阅读这篇博文。

让你们兴奋起来之后，是时候宣布坏消息了。它还没有在浏览器中实现(Chrome)，但它仍然值得知道，如果你想准备自己开始使用Sass。

2016-12-09 20:16:07

@apply很酷。它基本上允许您重用CSS块，而无需复制它们，也无需修改它们的选择器。

它将使使用CSS框架更容易，同时保持语义类名。

我发现这篇文章是这个功能的一个很好的指导。

不幸的是，目前基本上不存在浏览器支持。它可以与CSS预处理器(如PostCSS)一起使用。

它的未来也是不确定的，如果我理解得很好。该功能的主要倡导者已停止支持该功能。

2017-10-26 05:52:23

@apply来自一个已经被放弃的提案，并被CSS Shadow Parts取代。

@apply规则，它允许作者存储一组属性，然后在其他样式规则中引用它们。