在 CSS 中的 @apply 是什么?

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

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

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


h1 {
@apply --header-theme;
}




h2 {
@apply --header-theme;
}

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

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

: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将有一个变量发送给它并改变颜色。

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

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

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

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

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

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

它的未来也是不确定的，如果我理解得很好。这个特性背后的主要倡导者停止支持它。

@apply来自具有自从被遗弃的一个提议，并被替换为CSS阴影部分。

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

顺风使用这个特殊指令。

Tailwind的@apply有点像一个超类。你可以列出其他应该应用到此规则的类。我认为这是一种将经常在一起的课程组合在一起的方法。