css变量 | web

# css变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着可以创建具有局部或全局范围的变量，使用js来修改变量，以及基于媒体查询来修改变量。

变量格式：--xxx

var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0
			}
			:root{
				--bg:red;
				--tk:30px
			}
			.k{
				width:200px;
				height:200px;
				border:1px solid rosybrown;
				background:var(--bg);
				font-size:var(--tk)
			}
			
		</style>
	</head>
	<body>
		<div class='k'>test</div>
	</body>
</html>
<script>
	setTimeout(()=>{
		document.body.style.setProperty('--bg', '#7F583F');
		console.log(document.body.style.getPropertyValue('--bg').trim())
		setTimeout(()=>{
			document.body.style.removeProperty('--bg');
		},1000)
	},1000)
</script>

# 结合scss换肤等功能

scss文件变量设置

// --label-font-color：为js操作此变量需要用到的KEY
// --#RED：默认css属性值
$labelFontColor: var(--label-font-color, red);

js修改scss中$labelFontColor变量值

// --label-font-color：为js操作此变量需要用到的KEY
// --#BLUE：修改后的css属性值
document.getElementsByTagName('body')[0].style.setProperty('--label-font-color', 'BLUE');

参考 (opens new window)

← css优先级