In March 2017, Microsoft announced that the Edge browser would support CSS variables. This important new CSS feature is already supported by all major browsers.

When declaring a CSS variable, precede the variable name with two linking lines (–). Variable names are case-sensitive; –header-color and –header-color are two different variables.

The var() function is used to read variables. The var() function can also take a second argument, which represents the default value of the variable. If the variable does not exist, the default value is used. The second argument does not handle internal commas or Spaces and is treated as part of the argument.

1. Global/local variables

1.1: The root pseudoclass can be viewed as a global scope in which variables declared are accessible to all selectors below it

:root { --color: blue; }
.box{color: var(--color)}

1.2 Local variables

.box{
    --color: red;
    color: var(--color);
}

1.3 Default value of the second argument to the var() function

.box{
    --color: red;
    color: var(--bg,pink);
}

1.4 can be calculated in conjunction with CSS3 calc()

p{ –size: 20; font-size: calc(var(–size) * 1px); //20px} 1.5CSS variable inheritance (nearby rule)

<div class="box" id="alert">muzidigbig</div>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

1. When there are multiple variables with the same name, the rule of overwriting variables is determined by the weight of the CSS selector, but it is not! Important.

2. The value of variables should be based on the principle of proximity.

3. If the value of the variable is a numeric value, it cannot be used directly with numeric units. You must use the calc() function to connect them.

.foo { –gap: 20; / void/margin-top: var(–gap)px; } .foo { –gap: 20; / span/margin-top: calc(var(–gap) * 1px); } 4. If the value of a variable has units, it cannot be written as a string.

/.foo {–foo: ’20px’; font-size: var(–foo); }

/ valid /.foo {–foo: 20px; font-size: var(–foo); }

  1. CSS property names are not allowed to use variables. For example, the following is incorrect:

body {

--bc: background-color;    
var(--bc): #369;

}

  1. There are default values for CSS variables. If the values are not correct, the results will be displayed with the default values:

body { –color: 20px; background-color: #369; background-color: var(–color, #cd0000); / background color: transparent/}

  1. CSS variables end with Spaces by default. Such as:

p{ –size: 20; font-size: var(–size)px; Font-size: 20px; font-size: 20px; The default size of the element will be used. This can be used in conjunction with the above example calc(). } 4. Compatibility Handling Don’t handle the lower version of the browser. Check compatibility: To be honest, I don’t want to check compatibility. Try it myself. It’s the latest stuff, so it won’t be too bad if the team decides to use it. color: var(–primary); } / void declared with property worth /

@supports ((–a: 0)) {/ supported /} @supports (not (–a: 0)) {/ not supported /} / can also be checked using the @support command. /

const isSupported =

window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);

if (isSupported) {

/* supported */

} else {

/* not supported */

} / JavaScript checks if the browser supports CSS variables. / 5, JavaScript operation CSS variable writing method

Window. The onload = function () {/ / setting document. Body. Style. The setProperty (" primary ", "pink"); / / let the value read primary = document. The body. The style.css. GetPropertyValue (" primary "); console.log(primary); // delete variable; Return to delete the value of the variable let delPrimary = document. The body. The style.css. RemoveProperty (" primary "); console.log(delPrimary); }

Additional knowledge:

The calc() function is used to compute the length value dynamically.

(width: calc(100%-10px)); (width: calc(100%-10px)); (width: calc(100%-10px)); Any length value can be computed using the calc() function; The calc() function supports “+”, “-“, “*”, “/”; The calc() function uses standard mathematical precedence rules; Expressions with “*” and “/” can have no Spaces before or after them, but Spaces are recommended. For example, “width:calc(50% + 2em)”. This way you don’t have to worry about what the width of the element DIV is, and leave the browser to the tedious task of calculating it.

.elm {

/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();

}

———————————————— Copyright Notice: This article was originally written BY CSDN blogger “Muzidigbig” under the CC 4.0 BY-SA copyright agreement. Please attach a link to the source of the original article and this notice. The original link: https://blog.csdn.net/muzidig…