2.1 声明CSS变量
CSS变量，也叫自定义属性（Custom Properties），允许定义可在不同CSS代码段中重复使用的值。它们极大地简化了样式管理并增强了其灵活性。
CSS变量通过双连字符（--）声明，并可以在任何选择器中设置。不过，为了确保变量在整个文档中可用，通常在根选择器:root中定义它们。
语法：
选择器 {
--变量名: 值;
}
示例：
在这个例子中声明了四个变量：--main-bg-color, --main-text-color, --primary-color, 和 --font-size.
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
使用CSS变量
要使用变量的值可以使用var()函数，其接受变量名为参数。
语法：
选择器 {
属性: var(--变量名);
}
示例：
在该例子中使用变量的值来设置背景颜色、文本颜色、字体大小和链接颜色。
CSS
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 CSS变量的使用示例
示例 1: 变量的基本使用
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
HTML
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
结果：
- 页面背景将是浅灰色
- 文本将是深灰色
- 字体大小将是16像素
- 链接将是蓝色
示例 2: 在单个组件中重定义变量
CSS变量可以针对单个元素或组件重定义，从而在样式化中提供灵活性：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* 重定义变量 */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
HTML
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
结果：
- 标题背景将是蓝色，文本是浅灰色
- 页脚背景将是红色（重定义的变量），文本是浅灰色
示例 3: 将变量与其他值结合使用
CSS变量可与其他CSS值和函数结合使用：
CSS
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
HTML
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
结果：
- 容器将有由变量设置的内边距和外边距
2.3 在JavaScript中使用CSS变量
在JavaScript中使用CSS变量的示例
可以使用JavaScript动态更改CSS变量，从而在实时中调整样式：
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
HTML
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
说明：
点击按钮时，变量--bg-color和--text-color的值将改变，这会导致页面背景色和文本色的变化。
GO TO FULL VERSION