CSS 全局变量函数的声明与应用

声明变量

建议写在 CSS 文档流顶部

:root 是一个伪类选择器，里面的属性可以全局进行使用，这是一个放自定义属性的好地方, 可以随时更改和添加一些自定义样式

:root{
--appTagsGroupFontSize: 10px;
--appTagsGroupFontColor: #fff;
--appTagsGroupBorderRadius: 5px;
--appTagsGroupPadding: 3px;
}

应用函数

CSS 读取变量语法是 var(--{变量名称});

.ver{
  background: #0dcaf0;
  font-size: var(--appTagsGroupFontSize);
  color: var(--appTagsGroupFontColor);
  border-radius: var(--appTagsGroupBorderRadius);
  padding: var(--appTagsGroupPadding);
}

.arc{
  background: #20c997;
  font-size: var(--appTagsGroupFontSize);
  color: var(--appTagsGroupFontColor);
  border-radius: var(--appTagsGroupBorderRadius);
  padding: var(--appTagsGroupPadding);
}

.dat{
  background: #6f42c1;
  font-size: var(--appTagsGroupFontSize);
  color: var(--appTagsGroupFontColor);
  border-radius: var(--appTagsGroupBorderRadius);
  padding: var(--appTagsGroupPadding);
}

学到更多

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--appTagsGroupFontColor, #fff);