css变量

声明css变量

声明一个css变量和声明一个css属性一样，只不过约定css变量名必须是以--开头。

:root{
  --main-color: #ffffff;
  --main-bg: rgb(0, 0, 0);
}

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

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

css变量对大小写敏感，--blue和--Blue是两个不同的变量

使用css变量

var()用于读取变量，它接收两个参数，第一个参数是要读取的变量名，第二个参数是默认值，当变量未定义时使用默认值。

color: var(--foo, #333);

第二个参数可以出现逗号或空格，这些都被视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--padding-trb, 10px 5px 8px);

当浏览器遇到无效的css变量时，会使用默认值或继承值。

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }

浏览器将 --text-color 的值替换给了 var(--text-color)，但是 16px 并不是 color 的合法属性值。代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：

检查属性 color 是否为继承属性。是，但是 <p> 没有任何父元素定义了 color 属性。转到下一步。
将该值设置为它的默认初始值，比如 black。

css变量的作用

css变量适用范围非常广，下面讨论一下一些非常有用的场景。

多主题

css变量可以制作多主题网站，比如网站的暗黑模式，我们将各组件的颜色存放到css变量中，如果要改变网站主题颜色只要改动css变量值就可以了。

--bodyColor: #fff;
--bodyFontColor: #000;
/* 暗色模式 */
--bodyColor: #000;
--bodyFontColor: #fff;

通过动态的修改css变量，可以很方便地修改网站主题。

知名的跨平台移动app开发框架——Ionic就是采取这种方式实现。下面是Ionic官网文档的原话和翻译。

Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
Ionic组件是通过css变量构建的，这使应用程序的定制变得简单。css变量允许在一个地方存储一个值，然后在其他多个地方引用。这也使得动态改变css变为可能(在过去需要借助css预处理器)，css变量让覆盖Ionic组件以匹配品牌或主题变得比以往更容易。

可见css变量最重要的是可以在不使用css预处理器的前提下动态地修改css。

响应式

css变量可以实现响应式布局，我们看一下这个网站Infinity 主页 (inftab.com)

这个网站定义了很多css变量，并且网站的很多组件都由这些变量来控制，那么这时只要改变了这些css变量就能达到改变css的目的。

看css变量--icon-box-width，当我们拉动缩小窗口时，这个值也会跟着缩小，从而使组件也跟着缩小。

操作css变量

媒体查询

可以借助媒体查询达到修改css变量的目的。

body {
    --primary: #7f583f;
}
@media screen and (min-width: 768px) {
    body {
        --primary: #f7efd2;
    }
}
body {
    background-color: var(--primary);
}

JavaScript操作css变量

可以通过JavaScript读取、设置和修改css变量

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

参考

CSS 变量教程 - 阮一峰的网络日志 (ruanyifeng.com)

使用CSS自定义属性（变量） - CSS（层叠样式表） | MDN (mozilla.org)

Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps (ionicframework.com)

上一页css选择器

最后更新于3年前