虽然sass、less或者刚出的Stylus这些预编译的css的出现，让我们前端开发变得更方便和简洁。但在一定层度上有增加了工程的复杂度，前端现在百花齐放，各种技术和工具的出现让人眼花缭乱。我个人看法是技术在需要的时候用，不要只为技术而技术。尽量保持工程的单一。所以看到这个css原生的变量出现，有点小激动。

原文

介绍

变量的定义 可以让我们在错杂庞大的css中抽象出一个便于维护和使用的对象。

使用

1
2
3
4
变量定义： --*
使用变量： var(--*)
命名规范： 不能出现 { } [ ] ; ! % $等特殊字符。命名还是比较宽松的，可以为数字、字母、横线、下滑线或者中文等组成。
ps：css里面是不区分大小写的，但是定义变量的时候可以使用大写，建议还是根据css的规范全都使用小写。

所以css变量定义 也分全局和局部

  • 全局变量: 定义在 body {} 或者 :root{} 里面
  • 局部变量: 定义在你需要定义的父节点选择器上 例如:div.class1{}里面。

不用太纠结上面的概念性，直接看下面的例子就好

用例

本例子因为使用markdown编译 会把–符号做特除处理，所以为方便大家直观的理解，样式直接写在行内。 原生变量的使用，已使用在微信小程序上测试使用，虽然很方便，但是只在IOS上能完美兼容，在大部分android手机上还是有问题，使用在生产上还需谨慎。

例子一

在根节点上定义全局变量，变量全局可用

1
2
3
4
5
6
7
8
:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

例子二

变量定义 区分 大小写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    div {
        color: #000;
        --foo: red;
        --FOO: #ff5073;
    }
    .theLineColor {
        color: var(--foo);
    }
    .secondColor {
        color: var(--FOO);
    }
</style>
<body>
    <div class="theLineColor">
        aaaaaaa
    </div>
    <div dir="" class="secondColor">
        bbbbb
    </div>
</body>

运行结果：

aaaaaaa
bbbbb

例子三

1
--foo: if(x > 5) this.width = 10;

While this value is obviously useless as a variable, as it would be invalid in any normal property, it might be read and acted on by JavaScript.

反正我是没闹明白官文里面是几个意思，知道怎么使用的可以留个言告诉我下

例子四

继承父类选择器的样式的定义

1
2
3
4
5
6
7
:root {
  --header-color: #06c;
}
h1 {
  background-color: var(--header-color);
}

例子五

优先级顺序,和css的选择器的优先级一样

1
2
3
4
5
6
7
8
9
10
11
:root { --color: purple; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>我的紫色继承于根元素</p>
<div>我的绿色来自直接设置</div>
<div id='alert'>
  ID选择器权重更高，因此阿拉是红色！
  <p>我也是红色，占了继承的光</p>
</div>

我的紫色继承于根元素

我的绿色来自直接设置
ID选择器权重更高，因此这行是红色！

我也是红色，占了继承的光

例子六

变量可以根据不同语言单独保存，对需要国际化的网站很方便

1
2
3
4
5
6
7
:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}
a[href^="http"]::after {content: " (" var(--external-link) ")"}
<div class="root2"><a href="http://www.meiyou.com">美柚</a></div>

默认会出现 美柚(external link)

美柚

例子七

循环依赖

1
2
3
4
:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}

例子八

没有 任何作用 的互相引用，而且他们计算的都是个初始数值

1
2
3
4
:root {
  --one: calc(var(--two) + 20px);
  --two: calc(var(--one) - 20px);
}

例子九

变量的计算和引用

1
2
3
4
<one><two><three /></two></one>
one   { --foo: 10px; }
two   { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }

例子十

这是个 错误 的定义例子，变量的定义不能在属性名上

1
2
3
4
.foo {
  --side: margin-top;
  var(--side): 20px;
}

例子十一

在组件中使用,可以覆盖新想要覆盖的变量属性。可以灵活应用于组件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* In the component’s style: */
.component .header {
  color: var(--header-color, blue);
}
.component .text {
  color: var(--text-color, black);
}
/* In the larger application’s style: */
.component {
  --text-color: #080;
  /* header-color isn’t set,
     and so remains blue,
     the fallback value */
}
<div class="component">
  <div class="header">header
  </div>
  <div class="text">text</div>
  <div>component</div>
</div>

#### 响应式使用例子

在复杂的响应式布局中也可以使用变量的定义，根据不同分辨率的环境，设置不同的变量参数，达到相应变化的目的

张鑫旭的响应式例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

兼容性

兼容性是绿油油的片

ps: 这是编辑草稿的公开副本。它仅供讨论，并可随时更改。其在这里的出版并不意味着W3C认可其内容。 官方文档