CSS中的@apply是什么? [英] What is @apply in CSS?

问题描述

首先，我指的是CSS标记.

First of all, I am referring to the CSS tag.

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

I have googled @apply but I couldn't find anything that could explain its meaning properly for me.

这种标签的用途是什么?

What is the usage of such a tag?

推荐答案

解释它的简单方法是:将变量引入css(这是预处理器(如sass)的功能)，以及mixin(其功能类似于行为)(也在预处理器中).

the simple way of explaining it would be; introducing variables into css (which is a feature of preprocessors such as sass), and mixin which are function like behaviors (also in preprocessors).

想象--header-theme是一个函数(mixin)

imagine that --header-theme is a function (mixin)

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

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

这样，您可以在许多不同的地方使用它，而无需再次重写 DRY

this way you can use it in many different places without having to rewrite it again DRY

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

now the variable part could explain with this example

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

the mixin will have a variable sent to it and change the color

这不是功能的限制，您可以使用它更多，可以在博客文章

this is not the limits of the feature, you can use it for far more, you can read more about mixin and variables in SASS for other ways of using it, after I suggest you read this blog post

现在让我兴奋了，该是个坏消息了，它尚未在浏览器中实现 chrome ，仍然值得知道它即将到来，也许如果您想开始使用SASS做准备

now after I got you excited, time for the bad news, it is not implemented in browsers yet chrome, it is still worth knowing that it is coming and maybe if you want to prepare yourself start with SASS

这篇关于CSS中的@apply是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！