CSS 变量的命名

关于命名东西，各种语言都有些显示，例如 css 选择器不能是数字开头，JS 中的变量是不能直接数值，但是在 CSS 变量中，这些限制通通没有
不能包含 $,[,^(% 等字符，普通局限在只要是数字 [0-9] 字母 [a-zA-Z] 下划线_和短横线 - 这些组合，但是可以是中，日文或者韩文
变量值只能用作属性值，不能用作属性名；下面代码中，变量 --side 用作属性名，这是无效的

全局 / 局部变量

:root 伪类可以看做是 -- 个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到

css

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

1
2
3

CSS 变量的默认参数

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分；

css

color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px;15px 20px);

1
2

CSS 变量的拼接

如果变量值是一个字符串，可以与其他字符串拼接；如果变量值是数值，不能与数值单位直接连用；如果变量值带有单位，就不能写成字符串；

css

//字符串
--bar: 'hello';--bar--bar
--foo: var(--har)' world';--foo

//变量值是数值
foo { -gap: 20; margin-top: var(--gap)px; /* 无效*/ }

// 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接，

foo { -gap: 20; margin-top: calc(ar(--gap) * 1px); }

// 变量值带有单位
.foo {--foo: '20px'; font-size: var(--foo); /* 无效*/}
.foo {--foo: 20px; font-size: var(--foo); /* 有效*/}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS 变量的作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠" (cascade) 规则是 - 致的；

css

<style>
  .root { --color: blue; }
  div {--color: green; }
  #alert {--color: red; }
  *{ color: var(--colör); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

1
2
3
4
5
6
7
8
9
10

css 变量的注意问题

当存在多个同样名称的变量时候，变量的覆盖规则由 CSS 选择器的权重决定的，但并无

!important 这种用法

变量的取值采用就近原则。
如果变量值是数值，不能与数值单位直接连用。必须使用 calc() 函数，将它们连接；
如果变量值带有单位，就不能写成字符串。
CSS 属性名是不可以使用变量的；
CSS 变量是存在缺省值，只要定义正确，里面的值不对，结果以缺省值显示；
CSS 变量默认尾部是有空格的；

CSS 变量的响应式布局

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。
利用这个特点，可以在响应式布局的 media 命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

css

body {--primary: #7F583F;- secondary: #F7EFD2;secondarysecondary}
a {color: var(--primary);text-decoration-color: var(--secondary);}
@media screen and (min-width: 768px) {
  body {--primary: #F7EFD2;--secondary: #7F583F;}
}

1
2
3
4
5

CSS 变量的命名 #

全局 / 局部变量 #

CSS 变量的默认参数 #

CSS 变量的拼接 #

CSS 变量的作用域 #

css 变量的注意问题 #

CSS 变量的响应式布局 #