Question

首先，我指的是CSS标签。

我用Google搜索了@apply，但我找不到任何可以为我正确解释其含义的内容。

这种标签的用途是什么？

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和变量的其他使用方法，我建议你阅读这个{{3 }}

现在，在我让你兴奋的时候，时间到了坏消息，它还没有在浏览器中实现blog post，仍然值得知道它即将到来，也许你想准备自己从SASS开始< / p>

Answer 2

@apply来自proposal之后的abandoned，并被CSS Shadow Parts取代。

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

Answer 3

@apply非常酷。它基本上允许您重新使用CSS块而无需复制它们而无需修改它们的选择器。

它可以更容易地使用CSS框架并同时保留语义类名。

我发现this article对这个功能很有帮助。

不幸的是，目前浏览器支持基本上是non-existent。它可以与CSS预处理器一起使用，例如PostCSS。

如果我理解的话，它的未来也是不确定的。此功能背后的主要提倡者stopped supporting it。

什么是CSS中的@apply？

3 个答案: