CSS 什么是 CSS 中的 @apply

在本文中，我们将介绍 CSS 中的 @apply 属性，它是一种用于重用和整合样式规则的功能。@apply 可以让开发者定义一组样式规则，并将其应用到多个元素中，从而简化代码并提高样式的可维护性。

阅读更多：CSS 教程

@apply 的用法

@apply 可以在 CSS 中定义自定义属性集合，并在样式规则中引用这些自定义属性。这样一来，我们就可以将一组样式规则定义为一个变量，然后在需要的地方使用这个变量，避免重复编写样式。@apply 必须放在选择器的内部，并且必须位于样式规则的开头部分。

下面是一个 @apply 的简单示例：

:root {
  --button-style: {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
  };
}

.button {
  @apply --button-style;
}

.link-button {
  @apply --button-style;
  text-decoration: underline;
}

在上述示例中，我们首先在 :root 中定义了一个名为 --button-style 的变量，这个变量包含了一组按钮的样式规则。接下来，在 .button 和 .link-button 的样式规则中，我们使用了 @apply 属性并引用了 --button-style 变量。因此，这两个类名的元素都会应用 --button-style 变量中定义的样式规则。

多个 @apply 的优先级

当一个元素应用了多个 @apply 属性时，它们的样式规则会按照定义的顺序进行合并。如果有重复的样式属性，后面的 @apply 属性中的属性值会覆盖前面的属性值。

举个例子：

:root {
  --primary-style: {
    background-color: blue;
    color: white;
  };

  --secondary-style: {
    background-color: green;
    color: black;
    border: 1px solid black;
  };
}

.button {
  @apply --primary-style;
  @apply --secondary-style;
}

在上述示例中，.button 应用了 --primary-style 和 --secondary-style 这两个变量。由于 --secondary-style 在后面被引用，所以最终 .button 的样式会以 --secondary-style 中的属性值为准，即背景色为绿色，文字颜色为黑色，还有一个黑色边框。

浏览器兼容性

需要注意的是，目前并不是所有的浏览器都支持 @apply 属性。截至目前（2022 年 11 月），只有 Chrome 和 Opera 浏览器支持 @apply 属性。如果你需要在其他浏览器中使用 @apply，可以考虑使用 CSS 预处理器或 PostCSS 等工具来实现类似的功能。

总结

通过 @apply 属性，我们可以定义一组样式规则，并在需要应用这组样式规则的元素中引用它们。@apply 可以提高样式表的可维护性，并减少重复编写样式的工作量。不过需要注意的是，@apply 目前只有 Chrome 和 Opera 浏览器支持，如果需要在其他浏览器中使用类似功能，可以考虑使用 CSS 预处理器或 PostCSS 等工具来实现。