Yuying Wu

CSS Variables学习笔记

January 11, 2018

最近看了下CSS Variables(CSS变量,又名CSS自定义属性),跟大家分享一下我的学习笔记。

一、什么是CSS Variables

来,直接看MDN上的描述:

CSS 变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。

color: var(--main-color);

二、学习笔记

1. 声明 & 调用

i. 声明方式

CSS变量声明的方式非常简单,如下,声明了一个名叫color的CSS变量。

  • 在css文件中写
  • 写在html标签的inline-style里
  • 用JS给某个元素声明,方法.style.setProperty
body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')

ii. 调用方式

通过var()函数调用,如:

.block{
  color: var(--color);
}

iii. 变量的命名

说完声明和调用,还有个小问题。那么,CSS变量的命名,有什么限制么?下面我们来测试一下。

.foo-test{
  --foo:;
  --ffoo:;
  --Foo: red;
  --FOo: blue;
  --FOO: green;
  /* 以下省略测试className的代码 */
}

从以上测试代码可以看出:

  • CSS变量的命名是大小写敏感的
  • 不赋值或者赋值空格,都是无效的

2. 作用域 & 继承

CSS变量也有作用域一说,而最顶层的作用域就是:root,下面的所有的元素都可以共享相关CSS变量。

:root{
  --color: green;
}

刚才我们在body上,定义了--color,在body下的子元素,都会默认继承这个属性,随意使用。当然也可以重载,把--color定义为别的值。

<div class="block">
  <p>inherit color</p>
  <p class="css-var-text">overwrite color - hello world</p>
</div>
body{
  --color: green;
}
.block{
  color: var(--color);
}
.css-var-text{
  --color: red;
  color: var(--color);
}

.block,作为body的子元素,继承了--color属性,所以边框出来就是green

.css-var-text在自己的作用域中,重写了--color,出来的字体颜色是overwrite后的blue

3. 浏览器支持

i. 浏览器支持现状

来看看caniuse上CSS Variables (Custom Properties)的支持度:

PC的话,IE 11和Edge的支持度都很差,而Chrome(2016.3)、Firefox(2017.11)和Safari(2017.3)的一些新版本都是支持的,相信很快就能普及。

Mobile的话,Safari在2016年的版本已经支持CSS变量了,但Opera、Chrome、UC等的支持还不太好。

ii. fallbacks

浏览器的支持度不太好,我们又想玩新东西的话,就需要考虑如果浏览器不支持CSS变量,怎么优雅降级。(嗷,两套代码是有点……)

/* 当浏览器不支持CSS变量 */
.browser-support{
  background: red;  
}

/* 当浏览器支持CSS变量 */
@supports (--css: variables) {
  .browser-support{
    background: var(--color);
  }
}

三、代码习作

1. codepen

在学习CSS Variables的时候,有边写一些教程的demo,除了以上,还包括一些实际场景的应用,如像box-shadow复合属性的拆解,以及JS操作CSS变量等。

See the Pen CSS Varibles Study Notes by Y (@wuyuying) on CodePen.

2. flexbox属性的DEMO

之前在团队也做过一下下flexbox的分享,大家也知道,flex属性和对应的值特别多,当时就很想做个可以随时变属性值看效果的playground。

但想了下传统的实现方式,貌似没有优雅的方法。

  • CSS+JS实现:写一批classname,option切换时,通过JS修改classname改变样式;
  • 纯JS实现,根据option的value用JS改写元素的inline style(一直修改dom)

哎哟,换CSS Variables之后,一切就不一样了,可继承、可复用、易维护,目前实现比较简单,可能跟以上的传统方式差别不太大,不过后续要修改或者做更多优化,我相信优势就会凸显出来了。

demo传送门:wuyuying.com/flexbox-css-var github传送门

小结

哈哈,没想到小结写什么,如果大家有好玩的CSS Variables的应用,欢迎分享给我 :)