CSS自定义变量属性——像less,sass那样在css中使用变量(译)

浏览: 113 发布日期: 2017-09-22 分类: html

介绍

通常大型文档或者应用(甚至小规模的文档或应用)会包括大量的CSS。在这些CSS文件中通常会有大量相同的数据;例如,一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终。改动这些数据会非常困难并且容易出错,因为它零散地分布在CSS文件(甚至多个文件)中,可能无法使用寻找替换实现。

于是CSS自定义变量属性应运而生,它允许用户使用特定语法定义相关变量,并在一定范围内反复使用var()引用,改动这些变量,引用这些变量的地方的CSS也将对应地发生变化。

语法

定义自定义属性:--*

--开头,后加变量名,具有继承性,适用于所有元素,计算属性,不适用于动画

使用举例

  1. 初步使用

    :root {
      --main-color: #06c;
      --accent-color: #006;
    }
    /* The rest of the CSS file */
    #foo h1 {
      //引用变量
      color: var(--main-color);
    }

    以下使用方法错误!!!
    他错误地尝试使用变量名代替属性名:

    .foo {
      --side: margin-top;
      var(--side): 20px;
    }

    这并不能实现margin-top: 20px,会抛出语法错误。

  2. 大小写敏感
    尽管--FOO--foo都是合法的变量,但是当你引用前者指代的就是前者的值,后者亦然。

     h1 {
        --font-color: lightblue;
        --Font-color: lightgreen;
        color: var(--Font-color);
        //lightgreen
    }
  3. 设置值的注意事项

    自定义属性可以以!important结尾, 但是CSS解析器会自动移除这个属性的值,并按瀑布流的形式确定其优先属性。换句话说,虽然可以使用!important,但是顶级优先“!”的禁止其它同类CSS生效的作用并没有实现CSS。

    h1 {
        --font-color: lightblue!important;
        --Font-color: lightgreen;
        color: var(--font-color);
        color: var(--Font-color);
        //lightgreen
        }
  4. 继承性与优先级(可正常理解)

    :root { --color: blue; }
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }
    
    <p>I inherited blue from the root element!</p> //blue
    <div>I got green set directly on me!</div>        //green
    <div id='alert'>
      While I got red set directly on me!     //red
      <p>I’m red too, because of inheritance!</p>  //red
    </div>
  5. 可与正常属性混用

    :root {
      --main-color: #c06;
      --accent-background: linear-gradient(to top, var(--main-color), white);
    }
  6. 互相调用无效

            body {
                font-size: 16px;
            }
            //h1最终大小为16px
            h1 {
                --font-color: lightblue!important;
                --Font-color: lightgreen;
                --one: calc(var(--two) + 30px);
                --two: calc(var(--one) - 50px);
                color: var(--font-color);
                color: var(--Font-color);
                font-size: var(--one);
            }

    在不同范围内合法,事实上两者在不同范围内指代了不同的变量

    <one><two><three /></two></one>
    one   { --foo: 10px; }   //10
    two   { --bar: calc(var(--foo) + 10px); } //20
    three { --foo: calc(var(--bar) + 10px); } //30
    

    calc()使用通用的数学运算规则,但是也提供更智能的功能:

    • 使用“+”、“-”、“*” 和 “/”四则运算;
    • 可以使用百分比、px、em、rem等单位;
    • 可以混合使用各种单位进行计算;
    • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
    • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
  7. 变量初始默认值

    .component .header {
      color: var(--header-color, blue);
    }
    .component .text {
      color: var(--text-color, black);
    }
    
    /* In the larger application’s style: */
    .component {
      --text-color: #080;
      /* header-color 为默认值blue
      注: var(--header-color, blue, red)无效
      */
    }
    
  8. 变量的替换使用规范
    var()并不是按照原文替换CSS字符

        .foo {
          --gap: 20;
          margin-top: var(--gap)px;
        }

    这无法设置 margin-top: 20px;(a length),而是等同于 margin-top: 20 px; (a number followed by an ident空格),这是一个不合法的属性值. 不过, calc() 可以实现:

        .foo {
          --gap: 20;
          margin-top: calc(var(--gap) * 1px);
        }
        

    下面的代码从语法上江是无错误的,但是并无实际效果。因为20px并不是一个背景色的有效值,如果没有其他设置(必须优先级高于这里的设置)继承背景色,将会使用全局默认的透明背景色

        :root { --not-a-color: 20px; }
        p { background-color: red; }
        p { background-color: var(--not-a-color); }
        //这里虽然有背景色的设置但是优先级并没有自定义属性的高,故而`p`的背景色是透明色
    

翻译参考:

返回顶部