CSS中的@apply是什么？

首先，我指的是CSS标签。

我已经在Google上搜索过，@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做准备

@apply来自一项提案，该提案自此被放弃，并被CSS Shadow Parts取代。

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

@apply很酷 基本上，它使您可以重复使用CSS块，而不必在周围复制它们，也不必修改其选择器。

这将使使用CSS框架和同时保留语义类名称变得更加容易。

我发现这篇文章很好地说明了此功能。

不幸的是，目前基本上没有浏览器支持。它可以与CSS预处理器（如PostCSS）一起使用。

如果我了解得很好，那么未来也不确定。此功能背后的主要倡导者停止了对此功能的支持。