当前位置：首页 > article >正文

【CSS】变量的声明与使用

article 2024/9/25 16:23:19

原生变量
root 伪类

原生变量

CSS中我们可以统一设置变量方便页面维护。变量声明的时候，自定义样式变量名之前加上两根连词线 " – " 即可，使用 var() 来引用。声明的变量是有作用域的 ( 比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在h2标签中声明的，那么只能在h2标签下使用这个变量或它的值)

声明

body {
	--yanse: #f700ff;
	--kuandu: 30px;
	--gao: 50px;
}
/*
	yanse 与 kuandu 与 gao 是变量名称，它们的值分别是 #f700ff 和 30px 和 50px
	
	变量大小写敏感、变量名等这些参考 js变量名规则，而变量名中存储的值的书写规则仍然采用 css的规则
	如： --x: 50px 30px   而不是   --x: '50px 30px'
*/

使用
var() 函数是用来读取变量

div{
	background-color: var(--yanse);
	width: var(--kuandu);
	height: var(--gao);
}

var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。并且第一个参数后面的全部算第二个参数，写多个第二个参数语法也会提示报错

div{
	background-color: var(--yanse, #ffea00);
	width: var(--kuandu,50px);
	height: var(--gao,70px);
}

var() 函数也可作为其它变量的值，但也仅作为其它变量的值使用

html{
	--main-color: red;
	--div-text-color: var(--main-color);

	/* 无效 */
	var(--main-color): green;
}

作用域
CSS 变量遵从 CSS 优先级的原则，变量值可能会被覆盖

<style>
html {
	--color: blue;
}
h1 {
	--color: green;
}
.h1 {
	--color: yellow;
}
#h1 {
	--color: red;
	--div: #a2ffe2
}
* {
	color: var(--color); /* 在不同作用域中声明同一个变量，只生效自己作用域中的变量值，且遵从优先级原则 */
}
div{
	color: var(--div); /* 无法使用 #h1 标签作用域中声明的变量 */
}
</style>
<h2>蓝色</h2>
<h1>绿色</h1>
<h1 class="h1">黄色</h1>
<h1 id="h1">红色</h1>
<div>我会是什么颜色(蓝色)</div>

效果:
在这里插入图片描述

root 伪类

这个 CSS伪类 :root 匹配文档树的根元素，表示 <html> 被选中，除了优先级更高之外，与 html 选择器相同

语法

<style>
	/* 选中文档的根元素（HTML 中的 <html>） */
	:root {
		background: yellow;
	}
</style>

效果:
在这里插入图片描述使用

只要当前页面引用了 :root 所在的样式文件，都可以使用 var() 来引用

<style>
	:root{
		--opc: 0.9;
		--bgc: 72;
		--width: 200px;
		--height: 100px;
	}
	div{
		/* var() 函数可以代替元素中任何属性中的值的任何部分，var() 函数不能作为属性名、选择器或者其它除了属性值之外的值 */
		background-color: rgba(0, var(--bgc), 243, var(--opc));
		width: var(--width);
		height: var(--height);
	}
</style>
<div></div>