CSS Native variable var

Support for CSS variables:

In the PC-side support is good, IE does not support, mobile is not supported, presumably this is not widely used CSS variables why it

CSS precompiled tool Sass/less/stylus is convenient to define variables, convenient code maintenance, in fact, CSS also has its own original variable var:

Named by:--* (starting with--* representing the variable name)

Variable name naming rules:

Cannot start with:,,, $ [ ^ ( , % etc. character characters, can be numbers, but CSS and JS can not start with a number; but it could be Chinese, Japanese or Korean.

How to use:

1 just want to define the attributes of the element:

: Root {--red:red; --blue:Blue; --yellow:yellow;} . Div1 {
Background-color:var (--red);
}

The 2 CSS variable has its own scope:

For example:

#div2 {--borderwidth:2px;} . Div3 {--bordercolor:red; border:1px solid var (--bordercolor);} #div2 {border:var (--borderwidth) solid red;}

The--bordercolor in the. Div3 can only be used by elements of class Div3, which are scoped to Div3

--borderwidth can only be used for elements with ID DIV2, other elements have no effect

: The scope of variables defined under root is the entire document

3 CSS Default values

var( <自定义属性名> [, <默认值 ]? )

. DIV5 {Background-color:var (--color,red);}

--color variable is not defined, the default value red is used;

So the above definition is equivalent to:

. DIV5 { background-color:red;}

4 CSS Variable default value

. Div6 {Background-color:var (--color);}

DIV6 does not define a default value. The--color variable is not defined. The background color By default is the white pigment

Equivalent to no background color defined

5 Illegal variable values:

. DIV7 {--width:20px; color:var (--width,red);}

Illegal use, not a default value. Equivalent to

. DIV7 {--width:20px; color:20px;}

So the text color is the default color of the text, not red but black

6 Space trailing properties of CSS variables

. Div8 {--size:20px; font-size:var (--size) px;} the font size of div8 is not 20px; The default font size is font-size:20 px; there is a space behind 20 .... 

You can use CSS3 to calc（） calculate:

{  --size: ;      font-size: Calc (var (--size) * 1px);} the font size of Div8 is 20px;

7 CSS properties cannot define variables. For example:

. Div4 {--width:width; Border-var (--width):1px; var (--width):20px;}

The definition above is not legal.

8 Unlike the definition in Sass/less/stylus, it cannot be defined as a variable, for example:

--red:red;span {
background-color:var (--red);
}

The above definition method is not working.

CSS native variables are defined in the same way that you want to define the attributes of an element

CSS Native variable var