使用CSS变量可提升样式灵活性与维护性。通过:root定义--primary-color等变量，用var()调用，如color: var(--primary-color)；支持默认值color: var(--text-color, #333)，便于主题切换，建议语义化命名。
在CSS中使用var()设置颜色，可以让样式更灵活、易于维护。通过CSS自定义属性（也叫CSS变量），你可以统一管理颜色值，比如主题色、背景色等，修改一处即可全局生效。
CSS变量需要以两个连字符（--）开头。通常在根选择器 :root 中定义，这样变量可以在整个文档中使用。
:root {
--primary-color: #007bff;
--error-color: #dc3545;
--bg-color: #f8f9fa;
}
在需要设置颜色的地方，使用 var(--变量名) 来调用定义好的变量。
.header {
color: var(--primary-color);
}
<p>.button-error {
background-color: var(--error-color);
color: white;
}</p><p>body {
background-color: var(--bg-color);
}</p>如果变量未定义或无效，可以为 var() 提供第二个参数作为默认值。
立即学习“前端免费学习笔记（深入）”；
.text {
color: var(--text-color, #333); /* 如果--text-color不存在，使用#333 */
}
基本上就这些。使用CSS变量能提升代码可读性和维护性，特别适合做主题切换或多皮肤项目。不复杂但容易忽略的是命名规范和作用域控制，建议保持变量命名清晰，比如--color-primary、--font-size-large等语义化名称。
以上就是在css中使用变量var设置颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
收藏
