CSS自定义变量属性——像less，sass那样在css中使用变量（译）

王军发布于2019-08-29 13:28 / 1416人阅读

摘要：设置值的注意事项自定义属性可以以结尾但是解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而的背景色是透明色翻译参考

介绍

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

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

亲测：ios9环境下没有效果，ios9不支持ES56，推测与此有关 2017-11-5注。

语法定义自定义属性：--*

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

Name:             --*
Value:            
Initial:          (nothing, see prose)
Applies to:       all elements
Inherited:        yes
Percentages:      n/a
Media:            all
Computed value:    specified value with variables substituted (but see prose for "invalid variables")
Canonical order:   per grammar
Animatable:            no

使用举例

初步使用

   :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`，会抛出语法错误。

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

 h1 {
    --font-color: lightblue;
    --Font-color: lightgreen;
    color: var(--Font-color);
    //lightgreen
}

设置值的注意事项

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

h1 {
    --font-color: lightblue!important;
    --Font-color: lightgreen;
    color: var(--font-color);
    color: var(--Font-color);
    //lightgreen
    }

继承性与优先级(可正常理解)

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

I inherited blue from the root element!

//blue

I got green set directly on me!

//green

While I got red set directly on me! //red

I’m red too, because of inheritance!

//red

```

可与正常属性混用

:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}

互相调用无效

        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   { --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)"这种没有空格的写法是错误的；

表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

变量初始默认值

   .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)无效
     */
   }

变量的替换使用规范
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`的背景色是透明色

翻译参考：

https://drafts.csswg.org/css-...

专线服务服务器托管自定义css html中使用css css中使用cdn 在c语言中全局变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112629.html

CSS自定义变量属性——像less，sass那样在css中使用变量（译）

摘要：设置值的注意事项自定义属性可以以结尾但是解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而的背景色是透明色翻译参考介绍通常大型文档或者应用（甚至小规模的文档或应用）会包括大量的CSS。在这些CSS文件中通常会有大量相同的数据；例如，一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终。改动这些数据会非常困难并...

Backache 2019-08-01 17:39 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 评论0 收藏0
前端入门23-CSS预处理器（Less&Sass）

摘要：声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候，预处理器就出现了，其实应该是说和这类语言出现了。声明本篇内容梳理自以下几个来源： Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网感谢大佬们的分享。正文-CSS预处理（less&Sass） CSS预处理什么是 CSS 预处理？为什么要有 CSS 预处理？这...

freecode 2019-04-23 13:07 评论0 收藏0
前端利器：SASS基础与Compass入门

摘要：在吸取了的一些特性基础上，有了大幅改进，也就是现在的。嵌套极大程度上降低了选择器名称和属性的重复书写。选择器嵌套选择器嵌套是指从一个选择器中嵌套子选择器，来实现选择器的继承关系。也已经成为的一个标配组件。 SASS是Syntactically Awesome Stylesheete Sass的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门...

娣辩孩 2019-08-28 17:54 评论0 收藏0