CSS是现在网站建设一种语言，也是现在最为常用的建站方式。在CSS中存在真很多变量，这些变量可以让建设网站更加便捷。CSS变量给我们很多相同的优势，经典的变量提供了编程语言：方便、代码可重用性、更可读的代码库、提高预防错误措施。

    例如：

    :root {
           base-font-size: 16px;
           link-color: #6495ed;
           }
    p {
       font-size: var( --base-font-size );
      }
    a {
       font-size: var( --base-font-size );
       color: var( --link-color );
       }

    第一，基础知识。

    CSS有三个主要组件时，你应该知道使用CSS变量：

    1、自定义属性

    2、var()Functİon

    3、:root伪类

    4、自定义属性

    我们已经知道这个标准类的CSS属性包含了color、 margin、width以及font-size。那么下面的例子使用了colorCSS属性：

    body {color: #000000; /* The "color" CSS property */}

    自定义属性只是意味着我们作者定义属性的名字，定义一个自定义属性名称，我们需要用两个破折号（前缀--）。如果我们想要创建一个自定义属性的名称text-color有黑色的颜色值（#000000十六进制代码），这就是我们可以做的：

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

    var()函数，为了让我们的自定义属性应用于我们的工作，我们必须使用 var()Functİon，否则浏览器不会知道他们的存在。如果我们想使用这些，我们就会知道其价值--text-color自定义属性在我们 p、 h1、 h2这样式规则，然后我们需要使用 var()函数如下：

    :root { --text-color: #000000; }
    p {
       color: var( --text-color );
       font-size: 16px;
       }
    h1 {
        color: var( --text-color );
        font-size: 42px;
       }
    h2 {
        color: var( --text-color );
        font-size: 36px;
        }

    上面的例子是相当于：

    p {
       color: #000000;
       font-size: 16px;
       }
    h1 {
        color: #000000;
        font-size: 42px;
        }
    h2 {
        color: #000000;
        font-size: 36px;
        }

    :root伪类，我们需要一个地方来把我们的自定义属性。我们可以指定自定义属性在任何样式规则，但很多时候不是一个好主意，因为指定自定义属性到处是礼物可维护性和CSS-readability挑战。:root伪类代表了顶级的HTML文档。这把我们的自定义属性选择器是一个很好的地方，因为我们可以通过这些预见覆盖自定义属性值其他更有特异性的CSS选择器。

    CSS变量的好处，可维护性。在这给定web开发项目中，我们常常会重用特定CSS属性值。我们会经常重用colors，line heights，margins，font sizes等变量值。

    这里有四个样式规则的一个例子可能会受益于CSS变量：

    h1 {
        margin-bottom: 20px;
        font-size: 42px;
        line-height: 120%;
        color: gray;
        }
    p {
       margin-bottom: 20px;
       font-size: 18px;
       line-height: 120%;
       color: gray;
       }
    img {
         margin-bottom: 20px;
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: 20px;
              border: 3px solid gray;
              border-radius: 5px;
              }

    问题表面这就当我们需要改变某些属性值。如果我们手动更改这个值，它可能需要我们大量的时间，还有一个巨大的机会我们将这个错误地方，尤其是我们的样式表是巨大的。同样的，如果我们执行一个批处理查找和替换，我们可能会无意中这就会影响其他样式规则。

    我们可以使用CSS变量改写上面的例子：

    :root {
           --base-bottom-margin: 20px;
           --base-line-height:   120%;
           --text-color:         gray;
           }
    h1 {
        margin-bottom: var( --base-bottom-margin );
        font-size: 42px;
        line-height: var( --base-line-height );
        color: var( --text-color );
        }
    p {
       margin-bottom: var( --base-bottom-margin );
       font-size: 18px;
       line-height: var( --base-line-height );
       color: var( --text-color );
       }
    img {
         margin-bottom: var( --base-bottom-margin );
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: var( --base-bottom-margin );
              border: 1px solid gray;
              border-radius: 5px;
              color: var( --text-color );
             }

    现在想象一下你的客户说你屏幕上的文字是难以阅读，因为文本的颜色太轻了。在这种情况下，我们只需要更新在我们的CSS这一行：--text-color: black;

    这-66%少一行代码编辑，在以前的样式规则集的上下文中一行与行。同样，使用CSS变量让我们更容易，当我们想与我们的实验设计。当我们开发这个项目，我们可以快速测试的颜色值、目的和底部边距值都在一个地方，我们可以看到整体的影响。

    CSS改善可读性，自定义属性可以帮助使我们的样式表达易于阅读，它可以使我们的CSS属性声明更有意义。比较：

    background-color: yellow;
    font-size: 18px;

    相对于这个：

    background-color: var( --highlight-color );
    font-size: var( --base-font-size );

    定义属性的名字--base-font-size和--highlight-color甚至当我们阅读别人的代码时，我们立刻知道属性值在做什么。要记住的事情和大小写敏感，自定义属性区分大小写（与常规CSS属性）。

    :root {
           --main-bg-color: green;
           --MAIN-BG-COLOR: RED;
           }
    .box {background-color: var( --main-bg-color ); /* green background */}
    .circle {
             BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
             border-radius: 9999em;
             }

    .box,
    .circle {
             height: 100px;
             width: 100px;
             margin-top: 25px;
             box-sizing: padding-box;
             padding-top: 40px;
             text-align: center;
             }
    在上面的例子中，实际上有两个已定义的自定义属性：--main-bg-color和--MAIN-BG-COLOR。

    自定义属性值的决议，当一个自定义属性被声明为不止一次分配遵循正常的CSS层叠和继承规则。在下面的示例中，该链接将被指派的颜色red因为.container选择器相比有更高的特异性:root和 body。

    html
    <body>
    <div class="container">
    <a href="">Link</a>
    </div>
    </body>

    CSS

    :root {--highlight-color: yellow;}
    body {--highlight-color: green;}
    .container {--highlight-color: red;}
    a {color: var( --highlight-color );}

    然而，如果我们删除.container从我们的代码样式规则，链接将被指派的颜色green因为body成为下一个选择器匹配我们的链接。

    回退值，你可以分配一个后备属性值时使用var()函数表示法。简单地提供后备属性值作为一个额外的参数用逗号划（,）。在以下示例中，.box元素应该是呈现黑色背景。然而，由于有一个错误引用自定义属性的名字时，使用这个呈现背景将这个回退值（即red）。

    html
    <div class="box">A Box</div>

    CSS
    div { --container-bg-color: black;}
    .box {
          width: 100px;
          height: 100px;
          padding-top: 40px;
          box-sizing: padding-box;
          background-color: var( --container-bf-color, red );
          color: white;
          text-align: center;
          }

    避免这种情况的一个好方法就是想出描述性定义属性的名称。例如，命名上面的自定义属性--small-button-width使其不当使用不太可能。

    (转载请注明转自：www.wangzhan.net.cn/news/n1643.htm，谢谢!珍惜别人的劳动成果，就是在尊重自己!）