【转译】介绍CSS变量 - 石家庄裕华裕兴网站制作

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使其不当使用不太可能。

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