CSS variable 10分钟讲清楚

CSS Variable（CSS 自定义属性 ，又称"CSS 变量"）是 CSS3 引入的核心特性之一，用于存储可复用的样式值 （如颜色、尺寸、字体等），并通过 var()函数在样式中引用。它解决了传统 CSS 中"重复硬编码值"的痛点，同时支持动态修改（通过 JS 或媒体查询），是现代前端样式管理的基石。

一、基本语法

CSS Variable 的核心是"定义-引用"两步：

1. 定义变量

用 --前缀声明变量名，赋值遵循 CSS 属性值的语法（如颜色、长度、计算式等）。

通常将全局变量 定义在 :root（文档根元素，对应 <html>）上，使其作用于整个页面；也可在局部选择器（如 .class、#id）中定义局部变量（仅自身及子元素可用）。

复制代码

/* 全局变量（推荐放在 :root 下） */
:root {
  --primary-color: #4285f4;  /* 主色 */
  --font-size-base: 16px;     /* 基础字体大小 */
  --spacing-unit: 8px;        /* 基础间距单位 */
  --bg-gradient: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 渐变背景 */
}

/* 局部变量（仅 .card 及其子元素可用） */
.card {
  --card-radius: 8px;         /* 卡片圆角 */
  --card-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 卡片阴影 */
}

2. 引用变量

用 var()函数引用变量，第一个参数 是变量名，第二个可选参数是"回退值"（当变量未定义时使用）。

复制代码

/* 引用全局变量 */
.button {
  background: var(--primary-color);       /* 用主色做背景 */
  font-size: var(--font-size-base);        /* 用基础字体大小 */
  padding: calc(var(--spacing-unit) * 2)   /* 8px*2=16px（上下内边距） */
          calc(var(--spacing-unit) * 4);   /* 8px*4=32px（左右内边距） */
  border-radius: var(--card-radius);       /* 引用局部变量（若 .button 在 .card 内则生效） */
}

/* 带回退值的引用（变量未定义时用默认值） */
.text {
  color: var(--text-color, #333);  /* 若 --text-color 未定义，用 #333 */
  background: var(--bg-img, none); /* 若 --bg-img 未定义，无背景 */
}

二、核心特性

1. 作用域与继承

全局变量（:root下）：继承到所有子元素；
局部变量（如 .card下）：仅自身及子元素可访问，子元素可覆盖父元素的变量；
优先级：与普通 CSS 属性一致（更具体的选择器 > 后声明的声明）。

:root { --color: red; } /* 全局变量：红色 /
div { --color: blue; } / 局部变量：div 内为蓝色 /
div p { color: var(--color); } / p 标签继承 div 的 --color → 蓝色 */

2. 动态性（关键优势）

CSS Variable 是运行时变量（而非预处理器的一次性编译替换），支持：

JS 动态修改 ：通过 element.style.setProperty()实时更新变量值；
媒体查询/条件样式：根据屏幕尺寸、设备类型修改变量；
动画过渡 ：配合 transition实现变量值的平滑变化。

三、核心优势（对比预处理器变量）

传统 CSS 预处理器（如 Sass/Less）也有变量（如 $primary-color），但 CSS Variable 的优势在于动态性：

特性	CSS Variable	预处理器变量（Sass $）
生效时机	运行时（浏览器解析）	编译时（生成静态 CSS）
动态修改	支持（JS/媒体查询）	不支持
继承与级联	支持（同 CSS 规则）	不支持
浏览器兼容性	现代浏览器（IE11- 不支持）	依赖编译后的 CSS

四、实际应用示例

1. 主题切换（深色/浅色模式）

通过修改变量值快速切换主题，无需重写大量样式：

复制代码

/* 浅色主题（默认） */
:root {
  --bg-color: #fff;
  --text-color: #333;
  --card-bg: #f8f9fa;
}

/* 深色主题（通过 data-theme 属性触发） */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --card-bg: #2d2d2d;
}

/* 使用变量 */
body {
  background: var(--bg-color);
  color: var(--text-color);
}
.card {
  background: var(--card-bg);
}

JS 切换主题：

复制代码

// 切换到深色模式
document.documentElement.setAttribute('data-theme', 'dark');
// 切换回浅色模式
document.documentElement.removeAttribute('data-theme');

2. 响应式设计

通过媒体查询修改变量，适配不同屏幕：

复制代码

:root {
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

/* 小屏幕（≤768px）调整变量 */
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --spacing-unit: 6px;
  }
}

3. 统一间距系统

用变量定义"原子化"间距（如 sm/md/lg），避免硬编码：

复制代码

:root {
  --spacing-sm: 8px;   /* 小间距 */
  --spacing-md: 16px;  /* 中间距 */
  --spacing-lg: 24px;  /* 大间距 */
}

/* 使用 */
.header { padding: var(--spacing-md); }
.list-item { margin-bottom: var(--spacing-sm); }
.modal { padding: var(--spacing-lg); }

五、JS 操作 CSS Variable

通过 JS 可以读取/修改 CSS Variable，实现动态样式：

复制代码

// 1. 获取根元素（:root → <html>）
const root = document.documentElement;

// 2. 修改全局变量
root.style.setProperty('--primary-color', '#ea4335'); // 改为红色

// 3. 读取变量值（需用 getComputedStyle 获取计算后的值）
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--primary-color')
  .trim(); // 去除首尾空格
console.log(primaryColor); // 输出 "#ea4335"

// 4. 删除变量（恢复默认值）
root.style.removeProperty('--primary-color');

六、注意事项

兼容性：
- 支持 Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+；
- IE 11 及以下完全不支持 ，需用 polyfill（如 css-vars-ponyfill）兼容。
变量命名规范：
- 用 --开头，采用"小写+连字符"风格（如 --main-color，避免驼峰 --mainColor）；
- 语义化命名（如 --header-height而非 --h）。
变量值类型：
- 变量本质是字符串 ，需符合 CSS 属性值的语法（如颜色 #fff、长度 16px、计算式 calc(100% - 20px)）；
- 可嵌套使用：--a: 10px; --b: calc(var(--a) * 2);（--b = 20px）。
回退值的重要性：
- 当变量未定义时，var(--unknown)会返回属性的初始值 （如 color: var(--unknown)会用浏览器默认文本色）；
- 建议始终加回退值（如 var(--unknown, #333)），避免意外。

总结

CSS Variable 是现代 CSS 样式的"变量引擎" ，它将样式从"硬编码"转向"可配置"，大幅提升了维护性和动态性。结合 JS 可实现主题切换、响应式调整等复杂交互，是前端开发中必学的样式工具。

惠州大亚湾

CSS variable 10分钟讲清楚

一、基本语法

1. 定义变量​

2. 引用变量​

二、核心特性

1. 作用域与继承​

2. **动态性（关键优势）**​

三、核心优势（对比预处理器变量）

四、实际应用示例

1. **主题切换（深色/浅色模式）**​

2. 响应式设计​

3. 统一间距系统​

五、JS 操作 CSS Variable

六、注意事项

总结

1. 定义变量

2. 引用变量

1. 作用域与继承

2. 动态性（关键优势）

1. 主题切换（深色/浅色模式）

2. 响应式设计

3. 统一间距系统