CSS中关于变量的基本教程

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例

1. :root {   
2.   --base-font-size: 16px;   
3.   --link-color: #6495ed;   
4. }   
5. p {   
6.   font-size: var( --base-font-size );   
7. }   
8. a {   
9.   font-size: var( --base-font-size );   
10.   color: var( --link-color );   
11. }  

基础

当使用CSS变量时，你应该了解的三个主要组成：

    自定义属性
    var()函数
    :root伪类

自定义属性

你已经知道了一些CSS的标准属性，如color,margin,width和font-size。
下面的示例使用了CSS的color属性：

1. body {   
2.   color: #000000; /* The "color" CSS property */  
3. }  

自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。
为了自定义一个属性名，我们需要用--作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：

1. :root {   
2.   --text-color: #000000; /* A custom property named "text-color" */  
3. }  

var()函数

为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。
如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：

1. :root {   
2.   --text-color: #000000;   
3. }   
4. p {   
5.   color: var( --text-color );   
6.   font-size: 16px;   
7. }   
8. h1 {   
9.   color: var( --text-color );   
10.   font-size: 42px;   
11. }   
12. h2 {   
13.   color: var( --text-color );   
14.   font-size: 36px;   
15. }  

其等价于：

1. p {   
2.   color: #000000;   
3.   font-size: 16px;   
4. }   
5. h1 {   
6.   color: #000000;   
7.   font-size: 42px;   
8. }   
9. h2 {   
10.   color: #000000;   
11.   font-size: 36px;   
12. }  

:root伪类

我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

:root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
CSS变量的好处
可维护性

在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：

1. h1 {   
2.   margin-bottom