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变量声明能够大量减小机械性书写，减小代码量，便于统一修改等好处，不过修改要注意影响到其余全局变量，注意变量之间的引用关系。