CSS 自定义属性：基础篇
译者注：CSS 自定义属性系列有三篇
1. CSS 自定义属性：基础篇
2. CSS 自定义属性：使用篇
3. CSS 自定义属性：API 篇
原文链接：
CSS Custom Properties – The Basics
这是 CSS 自定义属性系列文章的第一篇，在这篇文章中我将快速介绍什么是自定义属性以及它们的语法，并在后续文章中详尽地分析 CSS 自定义属性，各位可以持续关注。
你大概已经听说过 CSS 自定义属性 （也被称为 CSS 变量），可能你是从 Google 发表的这篇文章中得知这个属性的。你可能尚且不了解这个特性的浏览器支持程度，从没见过相关的最佳实践，也无从将它同 Less 或者 Sass 做比较，总之就是一头雾水。那现在就怀揣着一肚子疑问，接着往下看吧，我将为你一一解答。
兼容性
第一个问题是：CSS 自定义属性能用在哪？目前从 Can I use 上获取的信息显示除了 Edge 外主流浏览器的最新版都已经支持这个特性了，而 Edge 也将支持这个属性。
这说明现在 CSS 自定义属性已经能用在实际项目中了，相信不久以后开发者们将大大依赖这个特性。但还请在使用之前请先检查一下本文附录中 Postcss 对于 CSS 自定义属性的支持情况，以便做好兼容。
设一个值，任何值都可以
那么……什么是自定义属性呢？简单来说就是一种开发者可以自主命名和使用的 CSS 属性。浏览器在处理像 color 、position 这样的属性时，需要接收特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？这倒和习惯无异：
.foo {
color: red;
--theme-color: gray;
}自定义元素的定义由 — 开头，这样浏览器能够区分自定义属性和原生属性，从而将它俩分开处理。假如只是定义了一个自定义元素和它的属性值，浏览器是不会做出反应的。如上面的代码， .foo 的字体颜色由 color 决定，但 –theme-color 对 .foo 没有作用。
你可以用 CSS 自定义元素存储任意有效的 CSS 属性值：
.foo {
--theme-color: blue;
--spacer-width: 8px;
--favorite-number: 3;
--greeting: "Hey, what"s up?";
--reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}
使用
假如自定义属性只能用于设值，那也太没用了点。至少，浏览器得能获取到它们的属性值。
使用 var() 方法就能实现：
.button {
background-color: var(--theme-color);
}下面这段代码中，我们将 .button 的 background-color 属性值赋值为 –theme-color 的值。这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，–theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。
.button {
background-color: var(--theme-color);
}
.title {
color: var(--theme-color);
}
.image-grid
