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

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?

推荐答案

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

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;
}

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;
}

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

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相关问答推荐

基于子元素的子元素数量的样式元素

转换间隙值时基于百分比的弹性元素&跳转

SVG文本在移动浏览器上增长并溢出

臭虫?嵌套的css供应商前缀中断Chrome css解析

当鼠标移到侧边栏之外时,如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断?

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

禁用MUI DataGrid上的悬停效果

测试响应式设计:手动拖动浏览器窗口与使用设备工具栏

如何更改 JqGrid 中的pager 背景 colored颜色 ?

Material UI Modal 因背景而变暗

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

带有图像的 CSS 网格在 Firefox 中表现不同

css3比例周围的空白

边界半径不起作用

CSS3 变换:旋转;在 IE9 中

更改最后一个
  • 的 CSS
  • 在 react-native 中使用 flex 使项目粘在底部

    bootstrap.css 和 bootstrap-theme.css 有什么区别?

    为什么容器 div 坚持比 IMG 或 SVG 内容略大?

    仅使用 css 的换行符(如
    )