首先,我指的是CSS标记.

我在谷歌上搜索了@apply个,但我找不到任何能正确解释它的意思的东西.

这样的标签有什么用途?

推荐答案

解释它的简单方法是;将变量引入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将向其发送一个变量并更改 colored颜色

这不是这个功能的限制,你可以用它做更多的事情,你可以阅读更多关于混合输入和SASS中的变量的其他使用方法,在我建议你阅读这篇blog post之后,你可以阅读更多关于混合和变量的内容

现在,在我让您感到兴奋之后,是时候告诉您一个坏消息了,它还没有在浏览器中实现chrome,仍然值得知道它即将到来,也许如果您想从sass开始做好准备的话.

Css相关问答推荐

CSS Stepper - LI After Overlaying LI Before

使用 Flex Box Tailwind CSS 的元素不相等

如何制作一个居中的标题样式,其中换行符将最长的行排列在底部

CSS如何防止键盘向上移动内容?

范围内的 CSS 未在组件中应用

如何检测操作系统是否在浏览器中处于暗模式?

最小内容和最大内容如何工作?

堆叠半透明盒子的 colored颜色 取决于订单?

Bootstrap 4 中的 class="mb-0" 是什么?

如何更改 bootstrap 程序原色?

为什么只为第一个元素显示双引号?

CSS 网格中的 justify-self、justify-items 和 justify-content 有什么区别?

如何删除 Bootstrap 4 下拉菜单中的箭头?

如何实现最大字体大小?

Chrome 设备模式模拟媒体查询不起作用

Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么?

如何在网页上使用 Apple 的新 San Francisco 字体

为什么在 CSS3 中启用硬件加速会降低性能?

边界半径不起作用