CSS 变量

网站

CSS 变量

使用 CSS 自定义属性 - MDN

引入

CSS 变量用于保存可以复用的样式值。

当颜色、间距、圆角等值在多个地方重复使用时，用变量可以减少重复，也方便统一修改。

正文

定义

定义

CSS 变量也叫自定义属性，使用 --变量名 定义，使用 var() 读取。

CSS 变量常用于主题色、字体大小、间距、圆角、阴影等统一配置。

语法

定义变量：

:root {
  --main-color: #2563eb;
}

使用变量：

.btn {
  background-color: var(--main-color);
}

:root 通常表示整个页面的根元素，把变量写在这里，页面中大多数地方都可以使用。

基础例子

:root {
  --primary-color: #2563eb;
  --radius: 8px;
}
 
.btn {
  border-radius: var(--radius);
  background-color: var(--primary-color);
  color: white;
}

如果以后要改主题色，只需要改 --primary-color。

默认值

var() 可以设置默认值。

.box {
  color: var(--text-color, #111827);
}

如果 --text-color 没有定义，就使用 #111827。

作用范围

CSS 变量会受到作用范围影响。

:root {
  --color: blue;
}
 
.card {
  --color: red;
  color: var(--color);
}

.card 里面的 --color 会覆盖外层的 --color。

简单理解：离元素更近的变量更优先。

常见变量

变量	用途
--primary-color	主色
--text-color	文字颜色
--bg-color	背景颜色
--radius	圆角
--space	间距
--shadow	阴影

例子

统一按钮样式

<button class="btn">提交</button>
<button class="btn btn-light">取消</button>

:root {
  --primary-color: #2563eb;
  --light-color: #eff6ff;
  --radius: 8px;
}
 
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  background-color: var(--primary-color);
  color: white;
}
 
.btn-light {
  background-color: var(--light-color);
  color: var(--primary-color);
}

变量让颜色和圆角更容易统一管理。

简单主题切换

:root {
  --bg-color: white;
  --text-color: #111827;
}
 
.dark {
  --bg-color: #111827;
  --text-color: white;
}
 
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

给页面加上 .dark 后，变量值改变，页面颜色也会跟着变。

特点

• CSS 变量使用 --变量名 定义
• 使用 var(--变量名) 读取变量
• 变量名区分大小写
• 变量可以写在 :root 中作为全局变量
• 变量也可以写在某个选择器中，只在对应范围内生效
• CSS 变量适合管理主题色、间距、圆角、阴影等重复值
• 使用变量可以减少重复代码，方便统一修改

理解

CSS 变量可以理解为给常用样式值起名字。

以前同一个颜色可能要在很多地方写很多遍，现在可以先定义成 --primary-color，后面通过 var(--primary-color) 使用。

它的价值不是让代码变复杂，而是让重复的样式值更好维护。

引出

理解 CSS 变量之后，可以继续学习 CSS 设计，把颜色、字号、间距、圆角等整理成统一的视觉规则。