CSS 中的@apply 是什么？

Question

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

这样的指令有什么用？

原文由 GameCoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解释它的简单方法是；将变量引入 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 开始

原文由 oqx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@apply 来自一个 后来被放弃 的提议，并用 CSS Shadow Parts 代替。

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

原文由 Eric Willigers 发布，翻译遵循 CC BY-SA 4.0 许可协议