前端技术分享
0%

CSS 变量 (CSS Custom Properties)

发表于 分类于

CSS 变量是什么？

CSS 变量允许在 CSS 中定义可重用的值。

定义变量

1
2
3
4
:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

使用变量

1
2
3
4
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

默认值

1
2
3
.button {
  color: var(--text-color, black);
}

作用域

1
2
3
4
5
6
7
8
9
10
11
.component {
  --local-color: red;
}

.component .child {
  color: var(--local-color); /* red */
}

.another {
  color: var(--local-color); /* undefined */
}

动态修改

1
2
const root = document.documentElement;
root.style.setProperty('--primary-color', 'green');

计算

1
2
3
4
:root {
  --base-size: 16px;
  --large-size: calc(var(--base-size) * 2);
}

主题切换

1
2
3
4
5
6
7
8
9
.dark-theme {
  --bg-color: black;
  --text-color: white;
}

.light-theme {
  --bg-color: white;
  --text-color: black;
}

浏览器支持

现代浏览器支持，IE11 不支持。

总结

CSS 变量让样式更灵活。结合 JavaScript，可以实现动态主题。