css变量复用 全局变量-局部变量

前言

　　简单使用场景：同一套后台系统有多套主题的情况下，主题色作为一个最常用到的可复用的颜色，非常有必要像js的全局变量一样存在全局变量中以作复用，之前我第一个想到的是sass的变量声明，未曾想到css本身也能实现，在此记录对己对人。

scss中的变量

　　1.变量声明-引用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

css中使用

　　1. 全局变量

　　　　1.1变量声明：

　　　　建议放在公共样式中，例如：common.css，用来保存全局的通用样式。

　　　　

:root{
  --cssName: value;
}

/* 例如： */
/* 支持驼峰命名、‘-’间隔 */
:root{
  --themeDefaultColor: #ccc;
  --theme-blue-color: blue;
}

　　　　1.2 变量使用：

:root{
  --cssName: value;
}

.selecter{
  cssName: var(--);
}

/* 例如： */
:root{
  --themeDefaultColor: #ccc;
}
.text{
  color: var(--themeDefaultColor)
}

　　2.局部变量

　　　　局部变量声明，局部范围内子元素都可使用该变量；

　　　　2.1变量声明：

　　　　

#box{
  --cssName : value;
}

/* 例如： */
#parent{
  --fontSize: 14px;
}

　　2.2 变量使用：

#box{
  --cssname : value;
}

#box .child{
  color : var(--cssname)
}

总结：

　　css变量声明可以大量减少机械性书写，减少代码量，便于统一修改等好处，不过修改要注意影响到其他全局变量，注意变量之间的引用关系。