CSS custom variable attributes - like less, sass as using variables (translated) in the css

Introduction

Usually large documents or applications (even small-scale document or application) will include a large number of CSS. There is usually a lot of the same data in the CSS file; for example, a site may use a color theme and repeated three to four colors throughout. These changes to the data will be very difficult and error-prone, because it scattered distributed in the CSS file (or even multiple files), it may not be used to find an alternative implementation.

Thus CSS自定义变量属性emerged, which allows the user to use a specific syntax defines the relevant variables, and repeatedly used in a certain range var()references, modifications to these variables, these variables are referenced CSS places corresponding change will occur.

Pro-test: no effect under ios9 environment, ios9 does not support ES56, presumably related to this 2017-11-5 note.

grammar

Define custom attributes:--*

To --begin with, plus the variable name, has inheritance, applies to all elements, attributes calculation does not apply to animation

Name:             --*
Value:            <declaration-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

Example of use

1. Preliminary use

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

   Use the following error! ! !

    他错误地尝试使用变量名代替属性名：
      .foo {
        --side: margin-top;
        var(--side): 20px;
      }
    这并不能实现`margin-top: 20px`，会抛出语法错误。

2. Case sensitive
   although --FOOwith --fooall legal variables, but when you refer to the former refers to is the value of the former, the latter is no different.

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

3. Caution Set values

   Custom attributes can be !importantthe end, but CSS parser automatically removes the value of this property, in the form of press waterfall stream to determine its priority property. In other words, although you can use !important, but the top priority "!" Prohibits the entry into force of the role of other similar CSS does not implement CSS.

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

4. Inheritance and priority (can understand normal)

   :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>
```

1. Can be mixed with the normal properties

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

2. Each call is invalid

           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);
           }

   Within various legal , in fact, two different ranges refer to different variables

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

   calc () using common mathematical notation, but also provide a more intelligent functions:

   • Use "+", "-", "*" and "/" four operations;

   • The percentage may be used, px, em, rem, and other units;

   • It can be mixed with various calculation units;

   • Expression in the "+" and "-", it must have a space before and after , such as "widht: calc (12% + 5em)" This wording is no space error;

   • An expression of "*" and "/", it can be no space before and after, but it is recommended to leave a space.

3. Variable initial default values

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

4. Replace Use variables
   var()not replace the original characters as CSS

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

   This can not be set margin-top: 20px;(a length), but equivalent to margin-top: 20 px; (a number followed by an ident空格), this is not a legitimate property value, however. calc() Can be achieved:

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

   The following code syntax from the river is error-free, but no practical effect. Because 20pxis not a 背景色valid value, if no other settings (have priority over the setting here) or 继承the 背景色will to use the global default 透明背景色.

          :root { --not-a-color: 20px; }
          p { background-color: red; }
          p { background-color: var(--not-a-color); }

        //这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而`p`的背景色是透明色

Translation Reference:

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