CSS变量简介

原文发表于inspiredwebdev.com

与编写 JavaScript 之类的代码相比，编写 CSS 似乎是一件容易的事，但归根结底，它只是一堆样式而已，对吧？

嗯，这通常是正确的，除非你需要非常复杂的布局或者有特殊需求，否则 CSS 比较容易上手。

当您有一个大型项目，并且希望所有页面的样式保持一致时，可能会出现问题。
您可能觉得使用 SASS 有点过于复杂，但您仍然希望能够定义一次值并在多个地方重复使用。

这时CSS变量就能派上用场了。

我们来看一个基本场景：

.main-section {
    /* ...other styles */
    background-color: #3498db;
}

.primary-button {
    /* ...other styles */
    color: #3498db;
}

这里我们用一种颜色为两个不同的类设置了样式。如果将来我们想更改这种颜色，就必须替换所有相关的代码。使用 CSS 变量，我们可以简化代码，只需这样写：

:root {
    --lightblue: #3498db;
}

.main-section {
    /* ...other styles */
    background-color: var(--lightblue);
}

.primary-button {
    /* ...other styles */
    background-color: var(--lightblue);
}

让我们一起来看看我在这里做了什么：

在伪类内部定义一个变量，:root以便我们可以在文档中的每个元素上使用它。
使用以下语法定义变量：--NAME: VALUE
在元素内部，使用以下语法的变量PROPERTY: var(VARIABLE_NAME)

现在，如果我们想把浅蓝色改成另一种蓝色，代码中只有一个地方可以这样做。

当然，变量并不局限于颜色！你可以把它们用于任何你想要的地方。

在不同元素上复制粘贴阴影效果可能很麻烦，我们可以使用变量来简化操作：

:root {
    --shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

div {
    box-shadow: var(--shadow);
    -webkit-box-shadow:  var(--shadow);
    -moz-box-shadow:  var(--shadow);
}

如果需要，我们甚至可以更进一步calc()，将 CSS 变量与原生 CSS 函数结合起来执行简单的计算。

假设我们像这样用变量定义了容器和标题的高度：

:root {
    --container-height: 100%;
    --header-height: 60px;
}

.container {
    heigth: var(--container-height);
}

.header {
    height: var(--header-height);
}

我们希望内容始终占据标题下方剩余空间的最大值。我们可以通过编写以下代码来实现：

.content {
    height: calc(100% - 60px);
}

但如果我们想利用这些变量呢？

.content {
    height: calc(var(--conainer-height) - var(--header-height));
}

在一个简单的项目中这样做似乎有点小题大做，但如果你的样式开始变得越来越复杂，你发现自己需要多次复制、粘贴和编辑值，那么创建变量就很有必要了，这样编辑起来会更快、更容易，也不容易出错，因为你只需要在一个地方进行调整。

我可以使用 CSS 变量吗`calc()`？

答案是肯定的，可以。除非你需要支持旧版浏览器，否则所有现代浏览器都支持这两个属性。你可以看看下面两张截图，它们来自caniuse.com。如果你需要支持 IE，可以使用这个 CSS 变量的 polyfill ：https://www.npmjs.com/package/css-vars-ponyfill。