CSS 变量

最新推荐文章于 2024-05-28 16:26:24 发布

proxy_

最新推荐文章于 2024-05-28 16:26:24 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/proxy_/article/details/102633575

版权

声明 CSS 变量的时候，发现跟使用普通属性是一样的，这里说的“一样”是指：使用的位置一样，并且使用的方式也一样。
只不过跟普通属性相比，CSS 变量多了两个连字符 -- 作为前缀，本质上就是个属性。而且这类属性都是开发者自己起的，属性值也是我们设置的，自然就是“自定义属性”了。
不过特殊的地方在于，我们可以使用 var() 函数解析出这类属性的属性值：

span {
    /* 局部变量 --color */
    --color: gold;
    /*调用变量*/
    color: var(--color);
}

还有一点，CSS 变量既然是属性，那么就可以像行内样式那样使用：

<span style="--color: gold; color: var(--color);">这段文本是金色的</span>

全局变量和局部变量

1.全局变量的声明：

:root {
    --color: gray;
}

:root 伪类命中的是文档根元素，也就说:

:root {
    --color: gray;
}
/* 相当于 */
html {
    --color: gray;
}

根元素是文档的最顶层元素，在它下面声明的变量就是全局变量。对应的，不是全局的变量就是局部变量。

<style>
:root {
    /* 全局变量 --color */
    --color: gray;
}

p {
    /* 局部变量 --color */
    --color: gold;
    color: var(--color);
}
</style>

这段文本是灰色的，<span>这段文本是金色的</span>

与 JS 作用域类似的是，局部变量会覆盖全局中的同名变量。因此上面里的文本是金色的。
2.var() 解析出来的结果只能作为属性值使用
下面这样写是不行的：

.mt-20px {
    --mt: margin-top;
    var(--mt): 20px; /* × 这种写法是错误的 */
}

我们想要可能是这种结果：margin-top: 20px，但观察发现，浏览器并不会解析var(--mt)，而且提示这是一个未知属性名。
下面这样写就没有问题了：

.mt-20px {
    --20px: 20px;
    margin-top: var(--20px); /* √ 这样写就没问题了 */
}

3.var() 的回退值（fallback）
var() 功能符，还接受第二个参数，表示一个回退值——当变量不能成功解析时，就会使用这个回退值。

.header {
    color: var(--header-color, blue);
}

上面代码中，如果--header-color 没有声明的话，就会使用回退值blue，作用有点类似于 JS 函数中的参数默认值。
4.使用 calc() 做数学运算
如果声明的变量值中包含数学运算，就要包装在 calc() 函数中。否则是无效运算。

/*错误写法：*/
.font-40px {
    --size: 20px * 2; /* × 错误的写法 */
    font-size: var(--size);
}

在浏览器中观察，不会看见显式的报错，但font-size 的最终解析值仍是默认的 16px。

/*正确写法：*/
.font-40px {
    --size: calc(20px * 2); /* √ 正确的写法 */
    font-size: var(--size);
}

calc() 函数的引入，为在 CSS 中进行各种不同单位的混合数值运算（加、减、乘、除），带来了极大的便捷：

.example {
    /* 加 */
    width: calc(100% + 1em);
    /* 减 */
    width: calc(100% - 80px);
    /* 乘 */
    width: calc(100% * .5);
    /* 除 */
    width: calc(100% / 6);
}

5.使用 JS 操作 CSS 变量
JS 操作 CSS 变量的原理，是使用 DOM 对象的 style 属性，它是一个 CSSStyleDeclaration类型的对象。
我们之前可能做过这样的操作：

document.body.style.color = 'gold'

color 是标准属性，可以直接使用这种方式设置。CSS 变量则属于非标准属性，使用这种方法就不会起作用：

// × 错误的写法，因为 --color 并不是标准属性
document.body.style['--color'] = 'gold'

但CSSStyleDeclaration 上提供了一个 setProperty() 方法，可以用来设置非标准属性。语法如下：

style.setProperty(propertyName, value, priority);

/*因此，我们可以这么做：*/
document.body.style.setProperty('--color', 'gold');

执行结果如下：
<body style='--color:gold;'>...</body>
这样，就能通过 JS 操作 CSS 变量了。

proxy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 变量

声明 CSS 变量的时候，发现跟使用普通属性是一样的，这里说的“一样”是指：使用的位置一样，并且使用的方式也一样。只不过跟普通属性相比，CSS 变量多了两个连字符 -- 作为前缀，本质上就是个属性。而且这类属性都是开发者自己起的，属性值也是我们设置的，自然就是“自定义属性”了。不过特殊的地方在于，我们可以使用 var() 函数解析出这类属性的属性值：span { /* 局部变量 --...
复制链接

扫一扫