深入了解 CSS 变量，让 CSS 创造更多可能！

奋飛

发布于 2023-07-24 14:40:46

1990

发布于 2023-07-24 14:40:46

文章被收录于专栏：Super 前端Super 前端

日常开发中所说的 CSS 变量，实际上是 CSS 的变量函数 var() 与 CSS 自定义属性的统称。

CSS 变量带来的提升:

使得开发和维护成本更低了，如让整个网站的换肤变得更容易；
改变了在图形交互效果的实现中 JavaScript 的占据比重，使得开发门槛降低了，体验升级；
使自定义语法的扩展成为可能。

基本用法

以两个减号（--）开始，属性值则可以是任何有效的 CSS 值

:root {
  --primary-color: blue;
}

:root 可以保证所有页面和任意标签元素都能使用这个自定义属性。

自定义属性的继承性

本质上是继承特性后代元素可以原封不动地继承祖先元素设置的 CSS 自定义属性值。
Shadow DOM 中的元素也能继承 Shadow DOM 中的 CSS 样式拥有自己独立的作用域。自定义属性是目前为数不多可以直接控制 Shadow DOM 样式的入口。

各大UI库可支持自定义主题的核心！！！

自定义属性的细节

CSS 自定义属性值可以是任意值或表达式

示例：SVG内联背景作为CSS自定义属性值使用实例页面

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 100%;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}

适应性之强，令人咋舌！

CSS 自定义属性值可以互相传递

在定义 CSS 自定义属性的时候，可以直接引入 CSS 自定义属性

body {
	--green: #4caf50;
	--successColor: var(--green);
	--columns: 4;
	--margins: calc(24px / var(--columns));
}

不能自身赋值

:root {
  --primary-color: blue;
}
body {
  --primary-color: var(--primary-color, blue);
}

不支持用在媒体查询中

@media (max-width: var(--maxWidth))

自定义属性的设置与获取

在 HTML 标签中设置 CSS 自定义属性

<div style="--color: blue;">
  <img src="1.jpg" style="border: 1px solid var(--color)">
</div>

在 JavaScript 中设置和获取 CSS 自定义属性

box.style.setProperty('--color', 'blue');
getComputedStyle(box).getPropertyValue('--color');

使用 content 属性显示 CSS 自定义属性值的技巧

attr() 可以使用任意 HTML 自定义属性控制元素的样式！但其各浏览器实现不是特别好！

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

<p data-foo="hello">world</p>
<style>
[data-foo]::before {
  content: attr(data-foo) " ";
}
</style>

这里，借助 CSS 计数器呈现 CSS 自定义属性值。

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

.bar {
    height: 20px; width: 300px;
    background-color: #f2f2f2;
}
.bar::before {
    /* 进度值信息展示 */
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002'; /* %\2002 为空格 */
    display: block;
    /* 宽度设置 */
    width: calc(100% * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

补充：