碎片化学习前端之CSS（var 函数）

var 函数

CSS 变量函数，用于取出 CSS 变量的值。

变量的目的只有一个：复用。CSS 变量是 CSS3 提出的，为 CSS 模块化配置提供了基础。

var 函数的基本用法

var() 函数接收两个参数，第一个参数为 CSS 变量名，第二个参数为默认值，可缺省，当变量未找到或者未赋值时，使用默认值，如var(variableName, default)。

定义变量

  1. 局部变量

    局部变量定义在元素标签的行内式 style 中，表示只作用于当前元素标签。

    <div class="text" style="--font-size:20px">var 函数</div>

    局部变量定义在当前 selector 结构中，表示只用于当前 selector 结构中。

    selector {
	--border-color: blue;
	border-color: var(--border-color);
}

  2. 全局变量

    :root {
	--box-bg-color: skyblue;
}

    全部变量定义 :root 结构中，所有元素标签均可复用结构内的 CSS 变量。

注意：CSS 变量的变量名定义必须以 -- 开头。

使用变量

使用变量需要借助 var() 函数取出 CSS 变量定义的属性值。

selector {
    font-size: var(--font-size, 16px);
    color: var(--box-bg-color, #000);
}

Demo 案例

案例代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css-var</title>
	<style type="text/css">
		:root {
			--box-bg-color: skyblue;
		}
		.wrapper {
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
			background-color: var(--box-bg-color);
			border: 1px solid;
			border-color: var(--border-color, #000);
		}

		.container {
			--border-color: blue;
			width: 100px;
			height: 100px;
			border: 1px solid;
			border-color: var(--border-color);
		}

		.text {
			font-size: var(--font-size, 15px);
		}
	</style>
</head>
<body>
	<div class="wrapper"></div>

	<div class="container"></div>

	<div class="text" style="--font-size:20px">var 函数</div>
	<div class="text">var 函数</div>
</body>
</html>

案例结果

posted @ 2023-03-07 13:51  深巷酒  阅读(285)  评论(0)  编辑  收藏  举报