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.

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 无法做到的.

总结

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. 这种批量修改未必就一定会很好看.

(新)CSS

相关

标签