原生css变量

CSS 自定义属性，通常称为 CSS 变量。类似于 JS 中声明的变量，可以复用 CSS 属性值。

定义格式 ： 变量名：值 ,变量两个--开头 

/* 1 创建全局 CSS 变量 --geek-color-primary*/
:root {
  --geek-color-primary: #fc6627;
}

/* 2 复用 */
.list-item-active {
  color: var(--geek-color-primary);
}

.tabs-item-active {
  color: var(--geek-color-primary);
}

作用域

根据 CSS 变量的作用域，分为两种：

1. 全局 CSS 变量：全局有效

2. 局部 CSS 变量：只在某个作用域内（比如，某个类名中）有效

/*
  全局 CSS 变量
  1. 使用 :root 这个 CSS 伪类匹配文档树的根元素 html。可以在CSS文件的任意位置使用该变量
     相当于 JS 变量中的全局
  2. CSS 变量通过两个减号（--）开头，多个单词之间推荐使用 - 链接。CSS 变量名可以是任意变量名
*/
:root {
  --geek-color-primary: #fc6627;
}
/* 使用 */
.tabs-item-active {
  color: var(--geek-color-primary);
}
.list-item-active {
  color: var(--geek-color-primary);
}

/* 
  局部 CSS 变量
*/
.list {
  --active-color: #1677ff;

  /* 在该 类 内部使用改变量 */
  color: var(--active-color);
}
.test {
  /* 这里的错误演示：无效！效果与不使用该变量时一致*/
  color: var(--active-color); 
}

特点

1. 可复用

2. 语义化，--geek-color-primary 比 #fc6627 更容易让人理解

标签：原生,变量,color,primary,geek,--,CSS,css
来源： https://blog.csdn.net/weixin_58207509/article/details/121595904