css 变量# css 变量
不借助 Sass，CSS 也支持变量了!不需要预处理器也不再需要编译
:root {
/* 1. Defining in Global Scope */
--color: red;
/* 2. Available in all selector*/
color: var(--color); /* red */
}
.local {
/* 1. Defining in Local Scope */
--color: blue;
/* 2. Scoped to the .local class only */
color: var(--color); /* blue */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 支持非常多的 css 属性
下面列出一部分的用法：
:root {
--color: red
--margin: 10px 20px;
--value: 5;
--border: var(--border-width) solid #000;
}
div {
color: var(--color)
margin: var(--margin);
padding: calc(var(--value) * 1px); /* 5px */
border: var(--border);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 在 JS 中使用 CSS 变量
# 获取 CSS 变量
使用 getPropertyValue() 获取变量
# 获取行内定义变量
<p style="--color: red"></p>
1
// Get our <p> element
const element = document.querySelector('p');
// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'
1
2
3
4
5
2
3
4
5
# 获取css标签定义变量
<style>
p {
--color: red;
}
</style>
1
2
3
4
5
2
3
4
5
// Get our <p> element
const element = document.querySelector('p');
// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'
1
2
3
4
5
2
3
4
5
# 获取全局变量
:root {
--color: red;
}
1
2
3
2
3
getComputedStyle(document.documentElement).getPropertyValue('--color'); // "red"
1
# 设置 CSS 变量
使用 setProperty 设置变量
// Get our <p> element
const element = document.querySelector('p');
// Set our "--color" variable to be "blue"
element.style.setProperty('--color', 'blue');
1
2
3
4
5
2
3
4
5
# 简单示例
<p style="--color:red; color: var(--color)"></p>
1
// Get our <p> element
const element = document.querySelector('p');
// On click, change text from "red" to "blue"
element.addEventListener('click', function() {
element.style.setProperty('--color', 'blue');
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 实例
# facebook 的 css 变量使用
CSS 变量是在 class 下定义的，当该类应用于DOM元素时，它的值将应用于其DOM子树中的样式。这让我们可以将主题组合到一个样式表中，这意味着切换不同的主题不需要重新加载页面，不同的页面可以有不同的主题而无需下载额外的CSS，不同的产品可以在同一页面上并排使用不同的主题
.light-theme {
--card-bg: #eee;
}
.dark-theme {
--card-bg: #111;
}
.card {
background-color: var(--card-bg);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9