编辑“︁CSS变量与常量”︁

{{DISPLAYTITLE:CSS变量与常量}}  
{{编程学习导航}}  

== 简介 ==  
'''CSS变量'''（也称为'''自定义属性'''）和'''常量'''是CSS预处理器（如Sass、Less）中的核心功能，用于存储可复用的值（如颜色、尺寸、字体等）。它们显著提升了代码的模块化程度和可维护性，同时减少重复代码。  

* **变量**：值可动态修改（如通过JavaScript或媒体查询）。  
* **常量**：值在编译后固定（常见于Sass/Less，原生CSS仅支持变量）。  

== 原生CSS变量 ==  
CSS原生通过`--`前缀定义变量，用`var()`函数调用。作用域遵循CSS层叠规则。  

=== 基本语法 ===  
<syntaxhighlight lang="css">  
/* 定义全局变量 */  
:root {  
  --primary-color: #3498db;  
  --spacing-unit: 16px;  
}  

/* 使用变量 */  
.button {  
  background-color: var(--primary-color);  
  padding: var(--spacing-unit);  
}  
</syntaxhighlight>  

**输出效果**：所有`.button`元素将显示蓝色背景和16px内边距。  

=== 作用域与覆盖 ===  
变量遵循CSS选择器优先级。局部变量覆盖全局变量：  
<syntaxhighlight lang="css">  
.container {  
  --primary-color: #e74c3c; /* 局部覆盖 */  
}  

.container .button {  
  background-color: var(--primary-color); /* 输出红色 */  
}  
</syntaxhighlight>  

=== 默认值与错误处理 ===  
`var()`支持回退值：  
<syntaxhighlight lang="css">  
.element {  
  color: var(--undefined-var, #000); /* 若变量未定义，使用黑色 */  
}  
</syntaxhighlight>  

== CSS预处理器中的变量与常量 ==  
以Sass为例，变量用`$`定义，常量通过`!default`或`const`（某些预处理器）标记。  

=== Sass变量示例 ===  
<syntaxhighlight lang="scss">  
$font-stack: Helvetica, sans-serif;  
$primary-color: #333;  

body {  
  font: 100% $font-stack;  
  color: $primary-color;  
}  
</syntaxhighlight>  

=== 常量与不可变性 ===  
Sass中通过`!default`定义可覆盖的默认值，而某些预处理器（如Less）支持`@const`：  
<syntaxhighlight lang="scss">  
$base-spacing: 16px !default; /* 可被后续定义覆盖 */  
</syntaxhighlight>  

== 实际应用案例 ==  
=== 主题切换 ===  
通过CSS变量动态切换主题色：  
<syntaxhighlight lang="css">  
:root[data-theme="dark"] {  
  --bg-color: #222;  
  --text-color: #fff;  
}  

body {  
  background: var(--bg-color);  
  color: var(--text-color);  
}  
</syntaxhighlight>  

JavaScript控制切换：  
<syntaxhighlight lang="javascript">  
document.documentElement.setAttribute('data-theme', 'dark');  
</syntaxhighlight>  

=== 响应式设计 ===  
结合媒体查询修改变量：  
<syntaxhighlight lang="css">  
:root {  
  --gutter: 10px;  
}  

@media (min-width: 768px) {  
  :root {  
    --gutter: 20px;  
  }  
}  
</syntaxhighlight>  

== 性能与最佳实践 ==  
* **限制变量嵌套**：过度嵌套`var()`可能影响解析性能。  
* **命名规范**：使用语义化命名（如`--color-primary`而非`--red`）。  
* **浏览器支持**：原生变量兼容所有现代浏览器（IE除外）。  

== 总结 ==  
CSS变量与常量是提升样式表灵活性的关键工具。原生变量适合动态场景，预处理器变量则优化静态工作流。合理使用可显著减少代码冗余并简化维护。  

<mermaid>  
graph LR  
A[CSS变量] --> B[动态修改]  
A --> C[作用域控制]  
D[预处理器常量] --> E[编译时固定]  
D --> F[代码复用]  
</mermaid>  

<math>  
\text{变量优势} = \frac{\text{可维护性} + \text{灵活性}}{\text{代码量}}  
</math>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS预处理器]]