CSS中一篇关于变量的基本好代码教程

互联网
西湖的风景是那样的雄伟壮观；湖水是那样清澈；是那样的平静，像一面镜子；湖边的景色是那样的美不胜收。

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"CSSproperty*/
  3. }

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

CSS Code复制内容到剪贴板
  1. :root{
  2. --text-color:#000000;/*Acustompropertynamed"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:1pxsolidgray;
  16. }
  17. .callout{
  18. margin-bottom:20px;
  19. border:3pxsolidgray;
  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:1pxsolidgray;
  21. }
  22. .callout{
  23. margin-bottom:var(--base-bottombottom-margin);
  24. border:1pxsolidgray;
  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);/*greenbackground*/
  7. }
  8. .circle{
  9. BACKGROUND-COLOR:VAR(--MAIN-BG-COLOR);/*redbackground*/
  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. <divclass="container">
  3. <arel="nofollow noopener noreferrer" 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. <divclass="box">ABox</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变量用起来很方便，但是浏览器对其支持情况不太好：

以上就是CSS中一篇关于变量的基本好代码教程。忘掉失败，不过要牢记失败中的教训。更多关于CSS中一篇关于变量的基本好代码教程请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
一篇关于CSS浮动与取消浮动的问题
一篇关于CSS中定位的小结
一个一篇关于border-radius值设置的问题记录
一篇关于css中line-height(行高)设置无效的问题的如何解决方法
一篇关于CSS引入方式的详细见解小结