标签：原生 变量 color primary geek -- CSS 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。