CSS – Variables

参考:

Youtube – CSS Variables - CSS vs Sass - variables inside media queries

Why we prefer CSS Custom Properties to SASS variables

与 Sass Variables 的区别

变量使我们可以很方便的批量修改设计. 在 Sass 的帮助下, 很久以前就有了这个能力. 但是 Sass 毕竟只是一个 pre-compile 工具.

它的 variable 在 run-time 阶段其实是不存在的.

而 CSS variable 的特色就是它是 CSS 真正的 variable. 你甚至可以在 run-time 的时候通过 JS 修改它.

定义

通常会把 variable 定义到最顶端 :root. 也就是 document.documentElement

:root {
  --font-size-xs: 1rem;
  --font-size-sm: 1.5rem;
  --font-size-md: 2rem;
}

但其实要定义到任何一个 element 都是可以的.

form {
  --font-size-xs: 1rem;
}

这样 form element 就有了这个 variable.

调用

h1 {
  font-size: var(--font-size-md, 4rem);
}

第 2 个参数是默认值, 当 variable 获取不到时就会用它.

它的寻找流程是这样的, selector 定位到 element, 从这个 element 开始找, 然后一直往上找.

:root {
  --font-size-xs: 1rem;
}
.title {
  --font-size-xs: 2rem;
  font-size: var(--font-size-xs);
}

像这种情况, 最终获取的是 2rem, 如果 .title 没有定义 variable, 那么会一直找到 :root 使用 1rem.

依赖

:root {
  --var1: red;
  --var2: var(--var1);
}

body {
  background-color: var(--var2); // red
  height: 100vh;
}

var2 depend on var1 是可以的哦. 而且修改 var1, var2 也会修改

document.documentElement.style.setProperty("--var1", "black");

const var2 = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue("--var2");
console.log("var2", var2); // black

Self Reference (依赖自己)

参考: Self-Referencing CSS Variables

child 想 override parent 的 variable, 但依赖 variable 自身. 这样是不可以的.

re-assign 是 ok 的, 关键是不可以 depend self. 目前只能靠一些 workaround 来实现

参考: Stack Overflow – Unable to overwrite CSS variable with its own value

:root {
  --border-width: 50px;
}
.component {
  // 巧思在这个 --border-width-modified
  border: var(--border-width-modified, var(--border-width)) solid red;
}

@media (min-width: 1280px) {
  :root {
    --border-width-modified: calc(var(--border-width) / 2);
  }
}

Work with Unitless

参考:

Can I add unit to a value inside css calc?

How to append a unit to a unitless CSS custom property with calc()

body {
  font-size: var(--font-size) + "px";
  font-size: var(--font-size) rem;
}

这 2 个都不 work. 解决方案是用 calc

body {
  font-size: calc(var(--font-size) * 1px);
  font-size: calc(var(--font-size) * 1rem);
}

很聪明的 idea, 但显然会扣一点性能的分数. 希望未来有 property way 去解决.

Not working with @media

参考: stackoverflow – CSS native variables not working in media queries

@media (min-width: var(--breakpoint-md)) {
  h1 {
    color: pink;
  }
}

这样是没有效果的. 目前还不支持, 以后视乎有 solution. 但现在只能用 Sass 的 variables 代替了.

Sass 写法

$breakpoint: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px,
);
@function breakpoint($size) {
  @return map-get($breakpoint, $size);
}
@mixin media-breakpoint($breakpoint) {
  @media (min-width: breakpoint($breakpoint)) {
    @content;
  }
}
@include media-breakpoint("md") {
  h1 {
    color: pink;
  }
}

JavaScript get/set variable

get variable

const fontSize = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue("--font-size-xs"); // 1rem

set variable

document.querySelector("h1").style.setProperty("--font-size-xs", "2rem");

动态修改 variable 就意味着修改了 CSS Style. 非常好用. 这也是 Sass 无法做到的.

注意 space

如果有用 prettier 之类的 format 工具. CSS value 通常会有一个空格在前面.

使用 JavaSript 拿到的 value 也会有这个空格哦.

const color = window
  .getComputedStyle(document.documentElement)
  .getPropertyValue('--color'); // ' red'

document.querySelector('h1').style.color = color;

但也不用太担心, 像 style.color = ' red' 是可以跑的, 如果真的有问题就 trim 掉它咯.

总结

CSS variable 是寄宿在 element 身上的. 通过 CSS selector 选中元素并赋予变量.

使用的时候则是从当前的 element 开始找, 然后一直往上找到 root element.

它可以配合 JS 做到动态修改, 来实现批量修改 style. 这是 Sass 无法做到的.

但是 Sass 的 variables 也有它的用途, 比如它可以作为参数传来传去等等.

个人的使用体验是:

1. 有时候做效果, 需要通过 JS 获取 scrollTop 值并用来设置 style, 这种时候用 variable 就可以很干净. 只修改特定变量, 而不负责具体 set style property.

2. type scale

这个 scale 方式适合用来做 RWD. 比如, 手机是 16px (1rem) 作为 base. 电脑是 18px (1.125rem) 作为 base.

然后所有的 font-size 就依据 scale-ratio 往上乘就好了.

完全符合了 type-scale.com 的做法.

当然这不是唯一的做法. 许多人依然会选择一个一个区域通过 break-point 去调每一次的 font-size. 这种批量修改未必就一定会很好看.