css变量

前言

变量做开发的都不陌生，是一个特别有用的东西，可是 css 也有变量，你听过吗？现在越来越多的框架/css 库都开始使用 css 变量。方便全局的变量管理

之前很多变量的实现方式都是依赖与sass/less。下面主要讲一下 css原生的变量

/* 不使用CSS变量 */
.title {
  background-color: red;
}
.desc {
  background-color: red;
}

/* 使用CSS变量 */
:root {
  --bg-color: red;
}
.title {
  background-color: var(--bg-color);
}
.desc {
  background-color: var(--bg-color);
}

这个好像和 sass/less 差别不大啊。何必再多此一举呢。
基于存在即合理的原则，总结出几点：

• 浏览器原生特性，无需经过任何转译就可直接运行
• 减少样式代码的重复性
• 增加样式代码的扩展性
• 提高样式代码的灵活性
• 增多一种 CSS 与 JS 的通讯方式
• 不用深层遍历 DOM 改变某个样式
• DOM 对象一员，极大便利了 CSS 与 JS 之间的联系

好像说到了 JS 和 css 关系？是的，我们可以通过 JS，去修改 css 的变量，不能修改怎么叫变量呢

document.body.style.setProperty('--bg-color', 'blue')

有了 JS 的加持，平台换肤也就是一个事件，几句赋值的问题了

使用 css 变量

说多无益，还是看下怎么使用，直接上手

变量的声明

声明变量的时候，变量名前面要加两根连词线（--）

body {
  --foo: #7f583f;
  --bar: #f7efd2;
}

你可能会问，为什么选择两根连词线（--）表示变量？因为 $foo 被 Sass 用掉了，@foo 被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

变量名大小写敏感，--main-color 和--Main-Color 是两个不同变量。

:root {
  --main-color: #4d4e53;
  --Main-Color: #000000;
}

变量作用域

既然是变量，就存在作用域的问题

变量的计算

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。 css 选择器选中计算规则看这里

<style>
  :root {
    --color: blue;
  }
  div {
    --color: green;
  }
  #alert {
    --color: red;
  }
  * {
    color: var(--color);
  }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color 变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
其次变量的作用域就是它所在的选择器的有效范围。

:root {
  --main-color: #333;
}

body {
  --foo: #7f583f;
}

.content {
  --bar: #f7efd2;
}

• --foo 的作用域就在 body 范围里内，在 body 内的元素都可以使用
• --bar 的作用域只在 .content 范围
• :root 则是全局的作用域，通常变量都放:root方便维护

变量使用 - var 函数

说了定义变量，说了作用域范围，这时候还没用上呢。使用的时候，需要用特定的函数var()

var 函数

• 函数用于读取变量
• 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值
• 函数还可以用在变量的声明
• 但是 css 变量不能用于函数名的声明

:root {
  --main-color: red;
  --padding-xs: 10px 10px 10px 10px;

  /* 函数还可以用在变量的声明 */
  --main-bg: var(--main-color);
}

div {
  color: var(--main-color); /* 用于读取变量 */
}

p {
  /* #000 就是默认值，如果 --main-color不存在，这会使用 #000  */
  color: var(--main-color, #000);
  /* 第二个参数不处理内部的逗号或空格，都视作参数的一部分。 */
  content: var(--font-stack, 'Roboto', 'Helvetica');
  padding: var(--padding-xs, 10px 15px 20px);
}

span {
  --side: margin-top;
  /* 无效! 无效! 无效! */
  var(--side): 20px;
}

变量值的类型

字符串类型

字符串之间可以相互拼接

:root {
  --bar: 'hello';
  --foo: var(--bar) ' world'; /* 得出： hello world */
}

/* 可以用在某个伪元素中 */

body:after {
  content: '--screen-category : ' var(--screen-category);
}

数值类型

如果变量值是数值，不能与数值单位直接连用。

错误的示范

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap) px;

  /* 如果我用字符串类型，可以吗？ 打住！不可以 */
  --ma-top: '20';
  margin-top: var(--gap) 'px';
  /* 或 */
  margin-top: var(--gap) px;
}

数值的正确用法

使用 calc() 函数，计算属性

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

带单位的数值

如果变量值带有单位，就不能写成字符串

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

响应式布局

可以在响应式布局的 media 命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

body {
  --primary: #7f583f;
  --secondary: #f7efd2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary: #f7efd2;
    --secondary: #7f583f;
  }
}

兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法

a {
  color: #7f583f;
  /* 如果不支持的话，这句不会被执行，那上面的css就不会被覆盖了 */
  color: var(--primary);
}

也可以使用 @support 命令进行检测。

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

JavaScript 操作

JS 判断是否支持 css 变量

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JS 操作 CSS 变量的写法如下

// 设置变量
document.body.style.setProperty('--primary', '#7F583F')

// 读取变量
document.body.style.getPropertyValue('--primary')
// 或者使用
getComputedStyle(document.documentElement).getPropertyValue('--primary')


// ' #7F583F' 读取出来可能会有空格

// 删除变量
document.body.style.removeProperty('--primary')

css 变量和 JS 通信 [重点]

body {
  --foo: if(x > 5) this.width = 10;
}

这段 css 变量是不起效果的。不过如果用 JS 去读取，这是有作用的一段 JS。所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。