这个问题折磨我快俩小时了，其中因为各种因素导致内在原因一直没有被我发现，现在我也只是略懂了一些，不过代码好歹是能用了。
声明CSS变量
声明一个CSS变量需要在变量名前加俩-号，如:
1
2
3
4
| .title
{
--vara: red;
}
|
使用CSS变量
直接看代码(请忽略变量名和实际用处的牛头不对马嘴):
1
2
3
4
5
6
7
8
9
| .title
{
--h1-size: 10px;
--h1-color: red;
--title-align: right;
text-align: var(--title-align);
font-size: var(--h1-size);
color: var(--h1-color);
}
|
不过直接这么定义的话，会导致js无法修改变量的值(也可能是Chromium的Bug)。
而且网上的其他教程一般都是类似这么定义的:
1
2
3
4
5
6
7
8
9
10
11
12
13
| :root
{
--h1-size: 10px;
--h1-color: red;
--title-align: right;
}
.title
{
text-align: var(--title-align);
font-size: var(--h1-size);
color: var(--h1-color);
}
|
很多教程里都说:root是全局作用域，不过不知道为何，我这里的.title无法访问:root下的变量(若无法访问变量的话，就会取默认值)。那我也没有办法，只能在认为:root不是全局作用域的情况下动手了。而且因为上面提到过在同级作用域声明的变量无法被js修改，所以我就索性不写变量，直接用JS设置变量了。那么JS如何设置变量以及我代码最后写成了什么样子请看下一标题。
JS修改CSS变量
代码如下:
1
2
3
| document.documentElement.style.setProperty("--h1-size", "10px");
document.documentElement.style.setProperty("--h1-color", "blue");
document.documentElement.style.setProperty("--title-align", "right");
|
这段代码就能修改CSS的变量了。不过设置的貌似是全局变量，会被局部变量覆盖。
那么我的代码如下(无关部分我就缩写了):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <html>
<h1 class="title">{{ title }}</h1>
</html>
<style>
:root
{
--h1-size: 10px;
--h1-color: red;
--title-align: right;
}
.title
{
text-align: var(--title-align);
font-size: var(--h1-size);
color: var(--h1-color);
}
</style>
<script>
document.documentElement.style.setProperty("--h1-size", "10px");
document.documentElement.style.setProperty("--h1-color", "blue");
document.documentElement.style.setProperty("--title-align", "right");
</script>
|
虽然:root下的变量无法作用到.title里，但是这里还是写一下代表有这个变量吧。
