快速了解，什么是CSS自定义属性？

CSS最大的魅力就是多样性。它既可以声明在整个项目中的样式，也可以让样式在特定未知失去作用。

CSS经过长期发展，现在已经有很多成熟的工具和分支，比如用来提升速度的Sass。而今天我们介绍的是CSS中最有用的功能之一：自定义属性（Custom Properties）。

先来看一个简单的例子：

:root {
--color-red: #fc4752;
}

.site-navigation {
background-color: var(--color-red);
}

.site-footer {
color: var(--color-red);
}

开头的:root是伪选择器，会指向DOM中最高级别的父元素，因此支持所有元素访问。可以看到，CSS定义变量是以-开头，而后续可以在任何:root选择器的子元素内，通过var()在任意位置访问它。

使用var()还可以同时定义一个默认值，即当var()内读取的第一个值不存在或无法访问时，则直接启用第二个值。

.site-navigation {
background-color: var(--color-red, red);
}

由于变量是从DOM层引用的，因此可以用一些特殊的引用方法，比如：

:root {
--color: red;
}

.site-navigation {
--color: green;

background-color: var(--color);
}

.site-footer {
color: var(--color);
}

在上述案例中，除了site-navigation下的var(–color)是表示绿色外，其他的var(–color)都表示红色。一般来说，在子对象层内覆盖掉父对象的默认值并不什么好办法，但有时候也需要这种解决方案。
这是个基础的例子，仍然可以延伸，比如在响应式设计中，可以针对手机端来定义。

:root {
--color-red: #fc4752;
--flex-layout: row;
}

@media (max-width: 640px) {
:root {
--flex-layout: column;
}
}

.site-navigation {
display: flex;
flex-direction: var(--flex-layout, row);

background-color: var(--color-red, red);
}

.site-footer {
color: var(--color-red);
}

这样，在触发了640像素的媒体样式后，site-navigation类的排序方向会变为column，让整个版面变成垂直的，而不是默认的水平（默认方向为row）。在这个例子中，其实对—flex-layout的初始赋值是不需要的，默认就是row。

这种代码很棒，但我们今天要讲的不止于此，它也存在一些问题。比如，媒体查询并非元素，因此不能用自定义属性来定义断点值（针对这个问题，CSS Working Group推出了env()查询的构想，但具体实施和浏览器支持可能还要等几年才能实现）。

不过没关系，我们继续讲我们能使用的。自定义属性也可以用来切换主题，比如你可以先定义一个基本主题，然后通过切换CSS的内容来完成整个主题的变更，浏览器会帮你完成一切的重渲染工作。
你可能会想到，某些Web应用内置了“夜间模式”就是这个例子的应用，在切换到夜间模式后，CSS文件并没有更换，而样式却大变样了。

<main>
      <nav class="site-navigation">
        <div>I love interwebs</div>
      </nav>
      <div class="site-footer">
        <label for="color-picker">Change color</label>
        <input type="color" id="color-picker">
      </div>
      <style>
        :root {
          --color: #fc4752;
        }
        
        body { margin: 0; padding: 0; }
        
        main {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100vh;
        }
        
        .site-navigation,
        .site-footer {
          padding: 12px;
        }
        
        .site-navigation {
          background-color: var(--color, red);
        }
        
        .site-footer {
          color: var(--color);
        }
      </style>
      <script>
        var colorPicker = document.querySelector("#color-picker");    
        colorPicker.addEventListener("change", function() { 
          document.documentElement.style.setProperty("--color", this.value);
      })
      </script>
</main>

代码中，使用拾取的颜色替换了原本的—color值，使得整个界面发生了更改。你也可以结合混合模式，比如使用Alpha通道色或png图片，这背后有无尽的可能性和乐趣。

如今，CSS高度发展，很多网站的CSS全部使用自定义属性，甚至不再依赖第三方开发人员即可架设修改。除了变量之外，还有CSS模块这样的用法，通过模块或嵌套，允许你不再构建某些代码而是直接复用（比如很多字符CSS）。再比如，现在有很多CSS预处理器，在调试完成后，预处理器可以帮助你优化CSS，让它更快并获得更好的浏览器支持。
总而言之，不断学习知识是开发者成长的必经之路。