css变量不起作用的常见原因有三个：一是作用域问题，变量需在正确的作用域内定义和使用，如全局变量应定义在:root中；二是语法错误，变量名必须以--开头且区分大小写，var()函数中的变量名拼写需正确；三是优先级冲突，更具体的选择器可能覆盖变量值，可通过调整选择器优先级解决。例如，在:root中定义的--main-bg-color可在全局使用，而在特定类中定义的变量仅限该类及其子元素使用；拼写错误会导致变量无法识别；高优先级的选择器会覆盖变量值。
CSS变量，也称为自定义属性，允许你在一个地方定义值，然后在整个样式表中重复使用它们。这使得主题更改、维护和整体样式管理变得更加容易。
定义和使用CSS变量，就像给你的样式表添加了一个强大的工具，让代码更清晰，维护更简单。
为什么我的CSS变量不起作用？常见原因及解决方法
CSS变量不起作用的原因有很多，但最常见的是作用域问题、语法错误和优先级冲突。
立即学习“前端免费学习笔记（深入）”；
首先，检查你的变量作用域。CSS变量的作用域由其定义的位置决定。如果在:root伪类中定义变量，它将全局可用。如果在特定元素或类中定义，它将只在该元素及其子元素中可用。确保你在需要使用变量的地方，变量的作用域是有效的。例如：
:root {
--main-bg-color: #f0f0f0; /* 全局变量 */
}
.container {
--container-padding: 16px; /* 容器内部变量 */
background-color: var(--main-bg-color);
padding: var(--container-padding);
}其次，检查语法错误。CSS变量的命名必须以两个短横线开头 (--)，并且区分大小写。使用var()函数访问变量时，也需要确保拼写正确。一个简单的拼写错误就会导致变量无法被识别。
最后，注意优先级冲突。如果同一个属性被多个规则定义，CSS会根据选择器的优先级来决定最终应用哪个值。如果变量的定义被更具体的规则覆盖，那么变量可能不会生效。可以使用!important来强制应用变量的值，但这通常不是一个好的做法，因为它会使样式表的维护变得更加困难。更推荐的做法是调整选择器的优先级，或者重新组织你的CSS规则。
例如，假设你有以下CSS：
:root {
--text-color: blue;
}
p {
color: var(--text-color); /* 应该显示蓝色 */
}
.override {
color: red; /* 更具体的选择器，覆盖了变量 */
}
<p>This text should be blue.</p>
<p class="override">This text should be red.</p>在这个例子中，.override类的优先级更高，所以文本颜色会显示为红色，而不是变量定义的蓝色。
如何使用CSS变量进行主题切换？
CSS变量在主题切换方面非常强大。你可以通过修改:root伪类中的变量值，来改变整个网站的外观。这使得创建亮色和暗色主题，或者根据用户偏好调整样式变得非常简单。
首先，定义你的主题变量。例如：
:root {
--bg-color: #ffffff; /* 白色背景 */
--text-color: #000000; /* 黑色文字 */
--link-color: #007bff; /* 蓝色链接 */
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}然后，创建一个暗色主题。你可以使用媒体查询来检测用户的系统偏好，或者使用JavaScript来根据用户的选择切换主题。
使用媒体查询：
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000; /* 黑色背景 */
--text-color: #ffffff; /* 白色文字 */
--link-color: #5bc0de; /* 青色链接 */
}
}使用JavaScript：
const toggleTheme = () => {
const root = document.documentElement;
const isDark = root.classList.contains('dark-theme');
if (isDark) {
root.classList.remove('dark-theme');
} else {
root.classList.add('dark-theme');
}
};
// CSS:
.dark-theme {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #5bc0de;
}这种方法允许你轻松地维护多个主题，并且只需要修改变量的值，而不需要修改整个样式表。
CSS变量与预处理器变量（如Sass/Less）的区别是什么？
CSS变量和预处理器变量（如Sass/Less变量）都允许你定义可重用的值，但它们在工作方式和适用场景上有所不同。
预处理器变量在编译时被替换为实际的值。这意味着，一旦CSS文件被生成，所有的变量都会被替换成它们的值。你无法在运行时修改这些变量的值。它们主要用于组织和简化CSS代码，减少重复。
CSS变量则是在运行时生效的。它们是真正的CSS属性，可以在JavaScript中修改，并且可以响应用户的交互或媒体查询的变化。这使得CSS变量非常适合用于主题切换、动态样式和响应式设计。
以下是一个简单的对比：
| 特性 | CSS变量 | 预处理器变量 (Sass/Less) |
|---|---|---|
| 生效时间 | 运行时 | 编译时 |
| 修改方式 | JavaScript, CSS (媒体查询) | 只能在编译前修改 |
| 适用场景 | 动态样式，主题切换，响应式设计 | 代码组织，减少重复，静态样式 |
| 作用域 | 遵循CSS作用域规则 | 文件作用域 |
| 性能 | 可能有轻微的性能开销 (因为是运行时计算) | 无性能开销 (编译时替换) |
总的来说，如果你需要动态地修改样式，或者创建可定制的主题，那么CSS变量是更好的选择。如果你只需要组织和简化CSS代码，并且不需要在运行时修改变量的值，那么预处理器变量可能更适合你。当然，你也可以同时使用这两种技术，结合它们的优点来构建更强大和可维护的样式表。
