CSS variables: Declaring global variables, making writing faster--root

When writing CSS public styles, we will declare a lot of common colors, font size and so on. Now we can declare CSS variables to implement the

1. Declaration of variables

The CSS variable declaration is a letter with two dashes (--) such as:

body{--colors: #dfdfdf; --fs16px:16px;}

In the code above, the body selector declares the colors and fs16px two variables. The use of '--' is because $ is occupied by sass, @ is less occupied, so is to differentiate them.

At the same time, you can also use--root{} to store all the variables, the use of the bottom of the direct call. Such as:

--root{--colors: #dfdfdf; --fs16px:16px;}

The declaration of a variable is case-sensitive. For example: colors and colors represent two different variables

2.var () function

The Var function is used to read the variable

a{  Color:var (--colors)      }

The Var () function can also use the second parameter to represent the default value of a variable. If the variable does not exist, the default value is used.

Color:var (--colors, #e5e5e5);

The second parameter does not handle internal commas or spaces, and is treated as part of the parameter.

var (--fontf, "Roboto", "Helvetica"), Var (--margins, 15px 20px 25px);

The Var () function can also be used in variable declarations

--root{      --bgcolors:red;      --fcolor:var (--bgcolors)        }

Note: A variable can only be used as a property value, not as a property name

3. Types of variable values

If the value of a variable is a string, it can be spliced with other strings

--far: ' Hello ';--foo:var (--far) ', World ';

If it is a numeric value, it is not possible to stitch

--far:20;--foo:var (--far) ' px '; Invalid

But they can be stitched together by the Calc () function.

--far:20;--foo:calc (Var (--far) *1px);

If the variable value is in a unit, it cannot be written as a string

--far: ' 20px '; Margin-top:var (--far); Invalid--far:20px;margin-top:var (--FAR); Effective

4. Scope

<style>: Root{--color:Blue; }Div{--color:Green; }#alert{--color:Red; }  * {Color:var (--color); }</style><P>Blue</P><Div>Green</Div><DivID= "Alert">Red</Div>

In the above code, three selectors declare --color variables. When different elements read this variable, the rule with the highest precedence is used, so the three-paragraph text color is not the same.

This means that the scope of a variable is the valid range of the selector it is in.

So some common variable values, preferably declared within--root{}

CSS variables: Declaring global variables, making writing faster--root