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

前言

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

css中使用

　　1. 全局变量

　　　　1.1变量声明：

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

/* 例如： */

:root{
  --themeDefaultColor: #ccc;
  --theme-blue-color: blue;
}

　　　　1.2 变量使用：

/* 例如： */
/*支持驼峰命名、- 间隔*/

:root{
  --themeDefaultColor: #ccc;
}
.text{
  color: var(--themeDefaultColor)
}

　　2.局部变量

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

#box{
  --cssname : value;
}

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

js中使用：

const root = document.querySelector(":root");
// 设置 CSS 变量
root.style.setProperty("--main-bg-color", "red");

// 读取 CSS 变量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);

// 删除 CSS 变量
root.style.removeProperty("--main-bg-color");

注意事项：

       1.默认格式：变量声明的默认格式为字符串格式，不要添加双引号或者单引号，数字类型除外。

:root {
  --text-color: red; //字符串
  --primary-font-size: 18px; //字符串
  --font-weight: 900 //数字
}

　　2.变量值为字符串类型可以拼接使用，数字类型除外，需要使用calc()函数。

:root{
  --border-dashed: dashed;
  --gap: 20;
}
.pic{
  border: 1px var(--border-dashed) #000; /*字符串*/
}

  .foo{

　　margin-top:calc(var(--gap)*1px); /*数字*/

　}

　　2.声明变量可以接收两个值，第二个为默认值。

color:var(--foo,#7F583F);

　　3.变量值只能用作属性值，不能用作属性名。

.foo{
    --side:margin-top;

　　/*无效*/
　　var(--side):20px;
}
　　    

　　4.作用域级别，生效级别。依照选择器的级别

　

:root{
  --color: red;
}
p{
  --color: red;  
}
.p{
  --color: red;
}
#p{
  --color: red;
}

　　5.响应式布局，在不同的媒体查询里面声明不同值的变量，实现不同尺寸下响应式布局。

/*正常屏幕尺寸下的color为red*/
body{
  --color: red;
}


/*屏幕在600px以下color为green*/
@media screen and(max- 600px) {
  body{
    --color: green;
  }
}


/*使用*/
a{
  color: var(--color);  
}

 　　6.兼容处理

/*css兼容处理*/
a{
　color:#7F583F;
　color:var(--primary);
}

/*js兼容检测*/
const isSupported = window.CSS && window.CSS.supports&& window.CSS.supports('--a',0);

if(isSupported){
　...
}else{
  ...
}

总结：

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