强盛的CSS变量
在 CSS 中，变量（Custom Properties） 允许你定义可重用的值，方便在整个样式表中利用和修改。CSS 变量的根本语法如下：1. 定义 CSS 变量
CSS 变量通常在 :root 伪类中定义，以便它们可用于整个文档：
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
[*]变量名称以 -- 开头，比如 --main-color
[*]:root 选择器相称于 html，使变量全局可用
2. 利用 CSS 变量
在 CSS 规则中利用 var() 函数引用变量：
语法：var(自定义属性, 回退值)
body {
color: var(--main-color);
font-size: var(--font-size);
}
button {
background-color: var(--secondary-color);
border: 2px solid var(--main-color);
}
回退值用法：
/* 回退值 */
/* 在 component 的样式中：*/
.component .header {
/* header-color 没有被设置，将使用回退值 blue */
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* In the larger application's style: */
.component {
--text-color: #080;
}
利用自定义属性作为回退值
:root {
--backup-bg-color: teal;
}
body {
/* main-bg-color 没有被设置，将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置，将使用回退值 white。 */
color: var(--main-bg-color, var(--backup-bg-color, white));
}
3. 变量的作用域
[*]变量可以定义在 :root 作用域，全局可用
[*]也可以在特定的元素中定义，仅该元素及其子元素可以利用
.card {
--card-bg: #f5f5f5;
background-color: var(--card-bg);
}
4. 提供默认值
假如变量未定义，可以利用 var() 提供默认值：
p {
color: var(--text-color, black); /* 如果 --text-color 未定义，则使用 black */
}
5. 在 JavaScript 中操作 CSS 变量
CSS 变量可以通过 JavaScript 动态修改：
document.documentElement.style.setProperty('--main-color', 'red');
6. CSS 变量 vs 预处置惩罚器变量
特性CSS 变量 (var())预处置惩罚器变量 (SASS/LESS)作用域运行时可变编译时确定JavaScript 操作可以修改不能修改计算可与 calc() 联合利用预计算 7. 利用场景：
- 动态主题切换
动态主题切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
--bg-color: white;
--text-color: black;
}
.dark-theme {
--bg-color: black;
--text-color: white;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button onclick="handleClick(event)">深色主题</button>
<script>
let isDeep = false;
function handleClick(e) {
document.body.classList.toggle('dark-theme');
isDeep = !isDeep;
e.target.innerHTML = isDeep ? '浅色主题' : '深色主题';
}
</script>
</body>
</html>
- 动态hover
动态hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
div:hover {
background-color: var(--hover-bg);
}
</style>
</head>
<body>
<div id="box" style="--hover-bg: none">hello</div>
<select id="select">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
</select>
<script>
const select = document.getElementById('select');
const box = document.getElementById('box');
box.style.setProperty('--hover-bg', select.value);
const handleChange = (e) => {
const value = e.target.value;
box.style.setProperty('--hover-bg', value);
}
select.addEventListener('change', handleChange);
</script>
</body>
</html>
CSS 变量非常适合 主题切换、响应式计划、动态样式调整 等场景。
页:
[1]