CSS 支持通过 ––variable-name: variable-value 声明变量,并通过 var(––variable-name) 使用变量。
CSS 使用变量示例
.parent { --color-red: red; } .child { color: var(--color-red); }
Less 和 Sass 已分别使用 $ 和 @ 声明变量,CSS 则采用双划线声明变量。
Less / Sass 变量示例
/* Less 变量示例 */ @blue: #f938ab; .blue { color: @blue; } /* Sass 变量示例 */ $blue: #1875e7; .blue { color: $blue; }
不同于 Less/Sass 在最外层声明, CSS Variable 需要在具体 selector 下声明变量,因此可以在子元素下覆盖父元素定义的变量。
一般将 CSS Variable 定义在伪类 :root 下,让所有子元素都可以继承。
定义在伪类 :root 下
:root { --base-color: #333; --base-size: 14px; } .btn { color: var(--base-color); font-size: var(--base-size); }
变量继承与重写
div { padding: 2px; } .one { --border: 1px solid red; border: var(--border); } .two { border: var(--border); --border: 2px solid green; } .three { border: var(--border); }
<div class="one"> 1 <div class="two"> 2-1 <div class="three">3</div> </div> <div class="two">2-2</div> </div>
解析到 .two selector 会优先解析 .two 拥有的变量,再应用。因此 .two 应用的 --border
是 2px solid green
。
.three 也会应用 .two 定义的变量。
动态修改 CSS Variable
网页渲染完成之后,再修改变量值,会重新应用 CSS。
因为 val(variable-name) 返回的是 variable-value,所以当 variable-value 不包含单位是,某些样式需要明确指定单位。
:root { --line-height: 20; } p { line-height: var(--line-height)px; }
这点不像 jQuery 自动检测浏览器设置的默认单位。需要显示设置单位。