CSS变量与常量
简介[编辑 | 编辑源代码]
CSS变量（也称为自定义属性）和常量是CSS预处理器（如Sass、Less）中的核心功能，用于存储可复用的值（如颜色、尺寸、字体等）。它们显著提升了代码的模块化程度和可维护性，同时减少重复代码。
- **变量**：值可动态修改（如通过JavaScript或媒体查询）。
- **常量**：值在编译后固定（常见于Sass/Less，原生CSS仅支持变量）。
原生CSS变量[编辑 | 编辑源代码]
CSS原生通过`--`前缀定义变量，用`var()`函数调用。作用域遵循CSS层叠规则。
基本语法[编辑 | 编辑源代码]
/* 定义全局变量 */
:root {
--primary-color: #3498db;
--spacing-unit: 16px;
}
/* 使用变量 */
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
- 输出效果**：所有`.button`元素将显示蓝色背景和16px内边距。
作用域与覆盖[编辑 | 编辑源代码]
变量遵循CSS选择器优先级。局部变量覆盖全局变量：
.container {
--primary-color: #e74c3c; /* 局部覆盖 */
}
.container .button {
background-color: var(--primary-color); /* 输出红色 */
}
默认值与错误处理[编辑 | 编辑源代码]
`var()`支持回退值：
.element {
color: var(--undefined-var, #000); /* 若变量未定义，使用黑色 */
}
CSS预处理器中的变量与常量[编辑 | 编辑源代码]
以Sass为例，变量用`$`定义，常量通过`!default`或`const`（某些预处理器）标记。
Sass变量示例[编辑 | 编辑源代码]
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
常量与不可变性[编辑 | 编辑源代码]
Sass中通过`!default`定义可覆盖的默认值，而某些预处理器（如Less）支持`@const`：
$base-spacing: 16px !default; /* 可被后续定义覆盖 */
实际应用案例[编辑 | 编辑源代码]
主题切换[编辑 | 编辑源代码]
通过CSS变量动态切换主题色：
:root[data-theme="dark"] {
--bg-color: #222;
--text-color: #fff;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
JavaScript控制切换：
document.documentElement.setAttribute('data-theme', 'dark');
响应式设计[编辑 | 编辑源代码]
结合媒体查询修改变量：
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 20px;
}
}
性能与最佳实践[编辑 | 编辑源代码]
- **限制变量嵌套**：过度嵌套`var()`可能影响解析性能。
- **命名规范**：使用语义化命名（如`--color-primary`而非`--red`）。
- **浏览器支持**：原生变量兼容所有现代浏览器（IE除外）。
总结[编辑 | 编辑源代码]
CSS变量与常量是提升样式表灵活性的关键工具。原生变量适合动态场景，预处理器变量则优化静态工作流。合理使用可显著减少代码冗余并简化维护。