css 进阶-变量的使用

我心飞翔 分类:javascript

css 进阶-变量的使用

其实,不用使用less、sass,css也支持自定义变量,也叫定制变量或级联变量。通常使用自定义属性符号(例如--main-color: black;)来设置它们,并使用var()函数(例如)来访问它们,color: var(--main-color);

浏览器兼容

很不幸,IE全线不支持(需要考虑IE兼容的可长点心)

image.png

基本使用

定义

  1. 使用以 双连字符(--) 开头的自定义属性名称和可以是任何有效CSS值的属性值来声明自定义属性。
element {
  --main-bg-color: brown;
}
 
  1. :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…

回复

我来回复
  • 暂无回复内容