CSS中的变量使用详解

小咪咪 2022-07-31 16:29 150阅读 0赞

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

### 示例 ###

: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变量时，你应该了解的三个主要组成：

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

### 自定义属性 ###

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

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

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

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

### var()函数 ###

为了应用自定义属性，需要利用**var()**函数，否则浏览器不知道他们代表什么。  
如果想要在`p`、`h1`和`h2`中的样式中使用`--text-color`，可以这样使用*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的可维护性和可阅读性是一个挑战。  
`:root` 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。

### CSS变量的好处 ###

#### 可维护性 ####

在一个Web开发项目中，我们经常重复使用一个特定的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文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。  
我们可以使用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;

#### 提高CSS的可读性 ####

自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。  
将这个声明

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

和下面的声明比较一下

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

像`yellow`和`18px`一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如`--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; }

#### 自定义属性值的解析 ####

当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：  
HTML

CSS

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

当移除`.container`规则时，链接的颜色值将是`green`。

#### 回退值 ####

当使用`var()`函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用`,`隔开。看下面的示例：  
HTML

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; }

因为给`var()`传递了一个回退值参数，所以`div`的背景色最中被渲染成红色。

#### 无效值 ####

谨防给CSS属性分配错误类型的值。  
在下面的示例中，由于自定义属性`--small-button`被赋予一个长度单位，它被用在`.small-button`样式中是无效的(译者注：因为`color`的属性类型值出错)

:root { --small-button: 200px; }
    
    .small-button { color: var(--small-button); }

避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为`--small-button-width`

### 浏览器对CSS变量的支持 ###

CSS变量用起来很方便，但是浏览器对其支持情况不太好：  
![var supported][]  
或者戳此链接：[var supported][var supported 1]

**译文出处：[http://www.ido321.com/1580.html][http_www.ido321.com_1580.html]**

> 本文根据@Jacob Gube的[《Introduction to CSS Variables》][Introduction to CSS Variables]所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：[http://sixrevisions.com/css/variables/][Introduction to CSS Variables]。

[Link 1]: http://sixrevisions.com/user-interface/poka-yoke-ui-design/
[var supported]: http://ido321.qiniudn.com/var.png
[var supported 1]: http://caniuse.com/#search=var
[http_www.ido321.com_1580.html]: http://www.ido321.com/1580.html
[Introduction to CSS Variables]: http://sixrevisions.com/css/variables/