CSS中关于变量的基本教程

前端  /  管理员 发布于 7年前   173

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

CSS Code复制内容到剪贴板

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属性：

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

var()函数

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

CSS Code复制内容到剪贴板

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

其等价于：

CSS Code复制内容到剪贴板

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属性值：

CSS Code复制内容到剪贴板

1. h1 {   
2.   margin-bottom: 20px;   
3.   font-size: 42px;   
4.   line-height: 120%;   
5.   color: gray;   
6. }   
7. p {   
8.   margin-bottom: 20px;   
9.   font-size: 18px;   
10.   line-height: 120%;   
11.   color: gray;   
12. }   
13. img {   
14.   margin-bottom: 20px;   
15.   border: 1px solid gray;   
16. }   
17. .callout {   
18.   margin-bottom: 20px;   
19.   border: 3px solid gray;   
20.   border-radius: 5px;   
21. }  

当需要改变某些属性值时，问题就会暴露出来了。
如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写：

CSS Code复制内容到剪贴板

1. :root {   
2.   --base-bottombottom-margin: 20px;   
3.   --base-line-height:   120%;   
4.   --text-color:         gray;   
5. }   
6. h1 {   
7.   margin-bottom: var( --base-bottombottom-margin );   
8.   font-size: 42px;   
9.   line-height: var( --base-line-height );   
10.   color: var( --text-color );   
11. }   
12. p {   
13.   margin-bottom: var( --base-bottombottom-margin );   
14.   font-size: 18px;   
15.   line-height: var( --base-line-height );   
16.   color: var( --text-color );   
17. }   
18. img {   
19.   margin-bottom: var( --base-bottombottom-margin );   
20.   border: 1px solid gray;   
21. }   
22. .callout {   
23.   margin-bottom: var( --base-bottombottom-margin );   
24.   border: 1px solid gray;   
25.   border-radius: 5px;   
26.   color: var( --text-color );   
27. }  

假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：

CSS Code复制内容到剪贴板

1. --text-color: black;  

提高CSS的可读性

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

CSS Code复制内容到剪贴板

1. background-color: yellow;  

和下面的声明比较一下

CSS Code复制内容到剪贴板

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

像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如--base-font-size和--highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。
要注意的事
大小写敏感

自定义属性是大小写敏感的（和普通的CSS规则不一样）

CSS Code复制内容到剪贴板

1. :root {   
2.   --main-bg-color: green;   
3.   --MAIN-BG-COLOR: RED;   
4. }   
5. .box {   
6.   background-color: var( --main-bg-color ); /* green background */  
7. }   
8. .circle {   
9.   BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */  
10.   border-radius: 9999em;   
11. }   
12. .box,   
13. .circle {   
14.   height: 100px;   
15.   width: 100px;   
16.   margin-top: 25px;   
17.   box-sizing: padding-box;   
18.   padding-top: 40px;   
19.   text-align: center;   
20. }  

自定义属性值的解析

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

XML/HTML Code复制内容到剪贴板

1. <body>  
2.   <div class="container">  
3.     <a href="">Link</a>  
4.   </div>  
5. </body>  

CSS

CSS Code复制内容到剪贴板

1. :root {   
2.   --highlight-color: yellow;   
3. }   
4. body {   
5.   --highlight-color: green;   
6. }   
7. .container {   
8.   --highlight-color: red;   
9. }   
10. a {   
11.   color: var( --highlight-color );   
12. }  

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

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

XML/HTML Code复制内容到剪贴板

1. <div class="box">A Box</div>  

CSS

CSS Code复制内容到剪贴板

1. div {   
2.   --container-bg-color: black;   
3. }   
4. .box {   
5.   width: 100px;   
6.   height: 100px;   
7.   padding-top: 40px;   
8.   box-sizing: padding-box;   
9.   background-color: var( --container-bf-color, red );   
10.   color: white;   
11.   text-align: center;   
12. }  

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

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

CSS Code复制内容到剪贴板

1. :root {   
2.   --small-button: 200px;   
3. }   
4. .small-button {   
5.  color: var(--small-button);   
6. }  

避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width
浏览器对CSS变量的支持

CSS变量用起来很方便，但是浏览器对其支持情况不太好：