首先，我指的是CSS标签。
我已经用谷歌搜索了@apply，但我找不到任何可以正确解释其含义的内容。
这样的标签有什么用？
【问题讨论】：
@apply 指令。不要这么快就解决人们的问题。太多的事情发生在这里。此外，我注意到 OP 不再是 stackoverflow 的成员，他是否因此而离开？真可怜。
标签： css
解释它的简单方法是；将变量引入 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和变量的其他使用方式，我建议你阅读这个blog post之后p>
在我让你兴奋之后，是坏消息的时候了，它还没有在浏览器中实现chrome，它仍然值得知道它即将到来，也许如果你想准备自己从 SASS 开始
【讨论】：
@apply 来自一个proposal，后来被abandoned 替换为CSS Shadow Parts。
@apply 规则，允许作者存储一组属性 在命名变量中，然后在其他样式规则中引用它们。
【讨论】：
@apply 很酷。它基本上允许您重复使用 CSS 块，而无需复制它们，也无需修改它们的选择器。
它将更容易使用 CSS 框架并同时保留语义类名称。
我发现this article 是对这个功能的一个很好的介绍。
不幸的是，目前浏览器支持基本上是non-existent。 它可以与 PostCSS 等 CSS 预处理器一起使用。
如果我理解得很好，它的未来也是不确定的。此功能背后的主要倡导者stopped supporting it。
【讨论】：
@apply 中使用 Tailwind CSS 中的这些类的方式。这引入了使用样式表的非常新的方式，为您留下了可重用的积木，这些积木也很容易分类 - 您实际上可以对它们进行排序（您可以像我一样使用来自 Tailwind CSS 文档的 ToC 的参考）而不是属性来扫描样式表有效率的！有很多可能性，比如写简单的pinshothand 而不是所有的top/bottom/left/right: 0。
Tailwind 将此用作特殊指令。
Tailwind 的@apply 有点像超类。您可以列出应该应用此规则的其他类。我认为这是一种将经常一起出现的类组合在一起的方法。
【讨论】：