CSS 变量（css自定义属性）

Y7998

已于 2024-03-29 18:08:01 修改

阅读量1.1k

点赞数 22

文章标签： css 前端

于 2024-03-29 18:06:36 首次发布

本文链接：https://blog.csdn.net/Y7998/article/details/137152902

版权

CSS 变量（css自定义属性）

使用场景：复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。

一、变量的声明

声明方法：声明变量时，变量名前面要加两根连词线（--）。

body {
     --foo: blue;
     --Foo: red;
}

在上述代码中声明了两个变量--foo和--Foo。它们与color和font-size等正式属性没有什么不同，只是没有默认含义。变量名大小写敏感，--foo与--Foo就是两个不同的变量。

二、`var()`函数。

变量的读取可以使用`var()`函数。

a {
    color: var(--foo);
    background-color: var(--Foo);
}

具体实现https://code.juejin.cn/pen/7280097120906903588

自定义属性的继承性

自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。

备用值

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

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

var()函数还可以用在变量的声明。

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

注：在HTML中，:root代表<html>元素，与选择器html相同，只是优先级更高。

变量值只能用作属性值，不能用作属性名。

var(--side): 20px;  /*无效的*/

三、变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';
--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。

.foo {
    --gap: 20;
    /* 无效 */
    margin-top: var(--gap)px;
 }

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

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

如果变量值带有单位，就不能写成字符串。

/* 无效 /
.foo {
    --foo: '20px';
    font-size: var(--foo);
}
/ 有效 */
.foo {
    --foo: 20px;
    font-size: var(--foo);
}

四、作用域

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

内联样式>id选择器>类选择器>标签选择器>通用选择器

所以群当局的变量通常放在:root里面，确保任何选择器都可以读取他们。

具体实现https://code.juejin.cn/pen/7280096149875195940

五、响应式布局

CSS 是动态的，页面的任何变化，都会导致采用的规则变化。

利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

具体实现https://code.juejin.cn/pen/7280097838439563279

参考资料

CSS 变量教程 - 阮一峰的网络日志