转载

【译】CSS中的变量使用详解

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

示例

  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 , widthfont-size

下面的示例使用了CSS的 color 属性:

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

自定义属性仅意味着我们(创建CSS文件的人)去定义属性的名字。

为了自定义一个属性名,我们需要用 -- 作为前缀。

如果我们要创建一个值为黑色的、名为 text-color 的自定义属性,可以这样做:

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

var()函数

为了应用自定义属性,需要利用 var() 函数,否则浏览器不知道他们代表什么。

如果想要在 ph1h2 中的样式中使用 --text-color ,可以这样使用 var() 函数:

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

其等价于:

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

  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. }
  22. <div class="md-section-divider"></div>

当需要改变某些属性值时,问题就会暴露出来了。

如果我们手动的改变属性值,尤其是当CSS文件很大时,不仅会花费大量时间,还可能会范一些错误。同样的,如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。

我们可以使用CSS变量重写:

  1. :root {
  2. --base-bottom-margin: 20px;
  3. --base-line-height: 120%;
  4. --text-color: gray;
  5. }
  6. h1 {
  7. margin-bottom: var( --base-bottom-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-bottom-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-bottom-margin );
  20. border: 1px solid gray;
  21. }
  22. .callout {
  23. margin-bottom: var( --base-bottom-margin );
  24. border: 1px solid gray;
  25. border-radius: 5px;
  26. color: var( --text-color );
  27. }
  28. <div class="md-section-divider"></div>

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

  1. --text-color: black;
  2. <div class="md-section-divider"></div>

提高CSS的可读性

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

  1. background-color: yellow;
  2. font-size: 18px;
  3. <div class="md-section-divider"></div>

和下面的声明比较一下

  1. background-color: var( --highlight-color );
  2. font-size: var( --base-font-size );
  3. <div class="md-section-divider"></div>

yellow18px 一类的属性值并没有给我们任何有用的上下文信息,但是当我们阅读如 --base-font-size--highlight-color 一样的属性名时,即便在其他人的代码,我们都能马上知道这个属性值是在做什么。

要注意的事

大小写敏感

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

  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. }
  21. <div class="md-section-divider"></div>

自定义属性值的解析

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

  1. <body>
  2. <div class="container">
  3. <a href="">Link</a>
  4. </div>
  5. </body>
  6. <div class="md-section-divider"></div>

CSS

  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. }
  13. <div class="md-section-divider"></div>

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

回退值

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

HTML

  1. <div class="box">A Box</div>
  2. <div class="md-section-divider"></div>

CSS

  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. }
  13. <div class="md-section-divider"></div>

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

无效值

谨防给CSS属性分配错误类型的值。

在下面的示例中,由于自定义属性 --small-button 被赋予一个长度单位,它被用在 .small-button 样式中是无效的(译者注:因为 color 的属性类型值出错)

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

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

浏览器对CSS变量的支持

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

【译】CSS中的变量使用详解

或者戳此链接: var supported

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

正文到此结束
Loading...