CSS Variables学习笔记

January 11, 2018

Tags:css

最近看了下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的应用，欢迎分享给我：）