变量与自定义属性

自定义属性| Custom Properties/Variables

大部分的编程语言都有所谓变量的概念，早期我们在CSS中往往是利用SCSS或者LESS这样的预处理器中提供的变量特性；令人欣慰的是，CSS最终也支持自定义变量的概念。CSS Custom Properties或者所谓的CSS Variables，对于前端开发者而言能够减少重复代码量，提升代码的可读性与灵活性；并且其是DOM的一部分，不再需要额外的编译步骤，并且在性能上也有所提升。随着应用复杂度的增加，我们的CSS样式文件也会变得非常庞杂，而将所有的常量定义在独立的文件中，改变样式的时候，我们就可以避免在大量的代码中重复地搜索与修改。

CSS Variables也逐步被应用到应用或者组件库的开发中，譬如 basicScroll 这样的组件库即是利用CSS Variables来进行变换控制。

语法基础

顾名思义，CSS Custom Properties/CSS Variables并非独立的变量定义，而是对于元素定义特殊的属性，这种属性的定义可以作用于任意的元素；CSS Variables基本的定义方式如下：

/* 传统方式 */
#title {
  color: #ff6f69;
}

.quote {
  color: #ff6f69;
}

/* 统一变量 */
:root {
  --red: #ff6f69;
}

#title {
  color: var(--red);
}

.quote {
  color: var(--red);
}

既然是变量，我们肯定需要考虑其作用域；如上面所示的声明在 :root 伪类中的变量，等价于绑定在了DOM树的根元素(一般来说是<html>)，其作用域即是所谓的全局作用域。而相对的局部作用域，即意味着某个变量仅可以被其子元素选择器所访问。譬如在某个自定义弹窗中：

.alert {
  --alert-color: #ff6f69;
}

// 在其子元素中使用
.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

上述定义的 alert-color 在应用中的其他部分就无法使用。对于需要进行计算的属性值，同样可以联合使用calc与var:

.margin {
  --space: calc(20px * 2);
  font-size: var(--space); /*equals 40px*/
}

另一方面，CSS Variables能够简化响应式界面开发，譬如我们可以在媒介查询中设置变量的尺寸值，这样就避免了编写大量重复的代码：

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

CSS Variables可以通过HTML元素的style属性进行定义：

<!--HTML-->
<html style="--color: red">
  <!--CSS-->
  body { color: var(--color) }
</html>

同样，我们也可以使用DOM API进行变量控制。

// 设置变量值
element.style.setProperty("--my-color", "rebeccapurple");

// 获取变量值
element.style.getPropertyValue("--my-color");
// => 'rebeccapurple'

// 移除变量值
element.style.removeProperty("--my-color");

在实际的使用中，我们还需要避免循环依赖的出现。当设置某个变量依赖其本身，或者两个变量互相依赖时，就出现了循环依赖：

/* 引用自身 */
:root {
  --m: var(--m);
}

body {
  margin: var(--m);
}

/* 相互依赖 */
:root {
  --one: calc(var(--two) + 10px);
  --two: calc(var(--one) - 10px);
}

典型应用

CSS Variables Site Theming

在这篇文章中也讨论了如何利用CSS Variables与Flexbox混合实现的动态排序功能。

<tr
  class="table-row"
  style="
    --order-by-published: 161221;
    --order-by-views: 2431;
  "
>
  <th class="table-cell">
    <a href="http://kizu.ru/en/fun/controlling-the-specificity/"
      >Controlling the Specificity</a
    >
  </th>
  <td class="table-cell">2016-12-21</td>
  <td class="table-cell">2 431</td>
</tr>

.table-body {
  display: flex;
  flex-direction: column;
}

.table-row {
  order: calc(var(--order) * var(--sort-order, -1));
}

#sort-by-published:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-published);
}

#sort-by-views:checked ~ .table > .table-body > .table-row {
  --order: var(--order-by-views);
}

#sort-ascending:checked + .table {
  --sort-order: 1;
}

#sort-by-name:checked ~ #sort-ascending:checked + .table > .table-body {
  flex-direction: column-reverse;
}

最近更新于0001-01-01