css 进阶-变量的使用
css 进阶-变量的使用
其实,不用使用less、sass,css也支持自定义变量,也叫定制变量或级联变量。通常使用自定义属性符号(例如
--main-color: black;
)来设置它们,并使用var()
函数(例如)来访问它们,color: var(--main-color);
浏览器兼容
很不幸,IE全线不支持(需要考虑IE兼容的可长点心)
基本使用
定义
- 使用以
双连字符(--)
开头的自定义属性名称和可以是任何有效CSS值的属性值来声明自定义属性。
element {
--main-bg-color: brown;
}
- 在
:root
伪类上定义自定义属性,以便可以在您的HTML文档中全局
应用它。但是,并不一定总是这样:可能有充分的理由限制自定义属性的范围。
:root {
--main-bg-color: brown;
}
使用
可以通过在 var()
函数内指定自定义属性名称来代替常规属性值来使用自定义属性值:
element {
background-color: var(--main-bg-color);
}
例子:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
注意:自定义属性名称区分大小写,--my-color将被视为的独立自定义属性--My-color。
自定义属性继承
如果在给定元素上未给 自定义属性
设置任何值,则使用其父项的值(继承父级的自定义属性值)。
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
.two {
--test: 10px;
}
.three {
--test: 2em;
}
在这种情况下,结果为var(--test):
- 对于class="two"元素:10px
- 对于class="three"元素:2em
- 对于class="four"元素:(10px从其父级继承)
- 对于class="one"元素:无效值,这是任何自定义属性的默认值
请记住,这些是自定义属性,而不是您在其他编程语言中可能会发现的实际变量。该值在需要的地方计算,不存储用于其他规则。例如,您不能为元素设置属性并希望按照兄弟姐妹的后代规则来检索它。像任何普通的CSS一样,仅为匹配的选择器及其后代设置属性。
自定义属性后备值
使用该 var()
函数,可以在尚未定义给定变量的情况下定义多个后备值
后备值不用于固定浏览器兼容性。如果浏览器不支持CSS自定义属性,则后备值将无济于事。它只是支持CSS自定义属性的浏览器的备份,如果给定变量未定义或具有无效值,则可以选择其他值。
该函数的第一个参数
是要替换的自定义属性的名称
。该函数的第二个参数
(如果提供)是一个后备值
,当引用的自定义属性无效时,该值将用作替换值。该函数仅接受两个参数
,将第一个逗号后的所有内容分配为第二个参数。如果第二个参数无效(例如,提供了逗号分隔的列表),则后备失败。
.two {
color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}
.three {
background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}
如上面的第二个示例所示,包括一个自定义属性作为回退是提供多个回退的正确方法。人们已经发现,该技术会导致性能问题
,因为它需要花费更多的时间来解析变量。
自定义属性的有效性
与每个属性相关的经典CSS有效性概念在定制属性方面不是很有用。当解析自定义属性的值时,浏览器不知道将在何处使用它们,因此必须考虑几乎所有值都是有效的。
不幸的是,这些有效值可以通过var()函数表示法在可能没有意义的上下文中使用。属性和自定义变量可能导致无效的CSS语句,从而导致 在计算时间有效 的新概念。
无效属性
当浏览器遇到无效var()替换时,将使用属性的初始值或继承的值。
:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
正如预期的那样,浏览器替代品的价值--text-color的地方var(--text-color),但16px不是有效的属性值color。替换后,该属性没有任何意义。浏览器分两步处理这种情况:
- 检查属性颜色
是否可继承
。是的,但是<p>没有任何具有color属性的父对象。因此,继续下一步。 - 将值设置为其
默认的初始值
,即黑色。
JavaScript中的值
在JavaScript中使用自定义属性的值,就像标准属性一样。
// get variable from inline style
element.style.getPropertyValue("--my-var");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");
// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
参考
developer.mozilla.org/en-US/docs/…
juejin.cn/post/684490…