什么是CSS中的@apply？

Question

首先,我指的是CSS标签.

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

这种标签的用途是什么？

Answer 1

Tailwind将其用作特殊指令。

Tailwind@apply有点像超一流。您可以列出应适用于此规则的其他类。我认为这是一种将经常在一起的课程分组在一起的方式。

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

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

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