css 变量

文章发布于2021年03月11日 14:59，归类于：前端

声明 css 变量

在{}内声明，变量名前加--连接线。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

:root {
	--color: blue;
}

body {
	--text-color: red;
}

.boy {
	--background-color: blue;
}

变量名大小写敏感，字母完全相同，但大小写不同视为不同的变量。

:root {
	--color: blue;
	--Color: red;
}

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

.box {
  --side: top;
  /* 无效 */
  var(--side): 10px;
}

var() 函数

<div class="box">1</div>

读取变量

:root {
	--color: blue;
}

.box {
	background:var(--color);
}

用来声明变量

:root {
	--color: red;
	--text-color: var(--color);
}

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

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

第二个参数不处理内部的逗号或空格，都视作参数的一部分。(这个不懂什么意思)

:root {
	var(--font-stack, "Roboto", "Helvetica");
	var(--pad, 10px 15px 20px);
}

如果变量值是一个字符串，可以与其他字符串拼接。

<style type="text/css">
	:root {
		--Hi: 'hello';
		--Name: var(--Hi)' world';
	}

	.box::after {
		content: var(--Name);
	}
</style>
<div class="box"></div>

如果变量是数值，需要使用calc()函数拼接才能拼接。

<style type="text/css">
	:root {
		--nub: 30;
		--pd: calc(var(--nub)*1px);
	}

	.box {
		display: inline-block;
		background-color: red;
		padding: var(--pd);
	}
</style>
<div class="box"></div>

如果变量带有单位，不可以写成字符串形式。

<style type="text/css">
	:root {
		--pd: '30px'; // 无效
		--pd: 30px; // 有效
	}

	.box {
		display: inline-block;
		background-color: red;
		padding: var(--pd);
	}
</style>
<div class="box"></div>

作用域

优先级最高的声明生效。

<style>
	:root {
		--color: blue;
	}

	body {
		--color: red;
	}

	.box {
		--color: black;
	}

	.box::before {
		color: var(--color);
		font-size: var(--size);
		content: "你好";
		display: block;
	}
</style>

<div class="box" style="--color:#999999;--size:40px;">hello</div>

js 操作 css 变量

<!DOCTYPE>
<html>
	<head>
		<style type="text/css">
			:root {
				--primary: red;
				--show: none;
			}

			.box {
				padding: 30px;
				background-color: var(--primary);
			}

			#btns {
				display: var(--show);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>

		<div id="btns">
			<button onclick="setProperty()">设置变量</button>
			<button onclick="getPropertyValue()">读取变量</button>
			<button onclick="removeProperty()">删除变量</button>
		</div>

	</body>
	<script type="text/javascript">
		const isSupported =
			window.CSS &&
			window.CSS.supports &&
			window.CSS.supports('--a', 0);

		if (isSupported) {
			/* supported */
			document.documentElement.style.setProperty('--show', 'block');
		} else {
			/* not supported */
		}

		// 设置变量
		function setProperty() {
			document.documentElement.style.setProperty('--primary', '#7F583F');
		}

		// 读取变量
		function getPropertyValue() {
			console.log(document.documentElement.style.getPropertyValue('--primary').trim())
		}

		// 删除变量
		function removeProperty() {
			document.documentElement.style.removeProperty('--primary');
		}
	</script>
</html>

参考文章

https://www.w3school.com.cn/css/css3_variables.asp

http://www.ruanyifeng.com/blog/2017/05/css-variables.html

https://juejin.cn/post/6883759797338898439

https://blog.csdn.net/weixin_33705053/article/details/88586828

转载请注明来源：《 css 变量》- rojerYong's Blog

文章链接：https://www.eoway.cn/article/1615445993.html

如果此文摘取了你的原创，请联系本站管理员，将对此文修改、删除处理。

--END--

rojerYong's Blog

想吃煲仔饭😄

上一篇：js常用方法下一篇：uniapp 微信公众号网页打开小程序