css变量的使用 非 sass less

前言

前端俩大css框架 sass less
$被sass用掉了
@被lass用掉了
官方选择了 –

一、基础使用

/* 声明俩个变量*/
title{
	--varcolor:blue;
	--vartitle:red;
}
/* css变量可以在多个选择器内使用 取决于优先级*/ 
header{
	--varcolor:red
}
/* 使用 用 var() 读取变量*/
content{
	color:var(--varcolor)
}
/* 一般来说 全局变量通常放在 根元素 ：root 里 确保所有元素都可以读取*/
:root{
	--varcolor:pink;
}

二、js操作css变量

// 控制变量 改变颜色
document.body.style.setProperty('--varcolor','yellow');
// 通过元素id 直接改变颜色
divid.style.setProperty('--varcolor','red')
// 移除样式
divid.style.removeProperty('--varcolor')
// 通过计算 获取变量的值
let colorvalue=getComputedStyle(document.body).getPropertyValue('--varcolor')

三、配置默认值

/* 没有设置过的变量 使用默认值*/
body{
	color:var(--varcolor:red)
}
/* 考虑到不是所有浏览器都支持*/
body{
	color:red
	color:var(--varcolor)
}