Understanding CSS/CSS3 Native Variable var

A variable is a good thing

In any language, the variable has a bit of the same effect, that is to reduce maintenance costs, accompanied by higher performance, the benefits of higher file compression ratio.

With the CSS precompiled tool Sass/less/stylus and gradually popular, CSS Working group quickly follow up the specification of CSS variables, and, many browsers have been followed, currently, in some projects can be directly used.

Chrome/firefox/safari browsers are green, compatibility is much more than I expected, so decisive early adopters to record the syntax usage and characteristics.

Second, the CSS variable var () syntax and usage and characteristics

CSS native variable definition syntax is:--*, variable use syntax is: VAR (--*), where * represents our variable name. About naming this thing, a variety of languages have some display, such as CSS selectors can not be the beginning of the number, JS variables are not direct values, but in CSS variables, these restrictions are not, for example:

: root {  --1: #369;} Body {  Background-color:var (--1);}

The resulting background color is as follows:

However, you cannot include $,[,^, (,%, and so on), as long as the "number [0-9]" "Letter [A-za-z]" "Underline _" and "dash-" these combinations, but can be Chinese, Japanese, or Korean, for example:

Body {  --deep Blue: #369;  Background-color:var (--Deep Blue);}

Therefore, we can directly use the Chinese name as a variable, even if the English level 4 has not been a small partner will not have pressure, we do not need to hang a translator at any time around.

Both the definition and use of a variable can only be in the declaration block {}, for example, the following is not valid:

--Navy: #369; body {  Background-color:var (--Deep Blue);}

The definition of a variable, or a declaration similar to the declaration of a CSS counter, you should get rid of the pre-compiler tool syntax, such as sass/less, and interpret the native variables of CSS as a CSS property.

In this way, you can apply rules to their weights and variables much easier to understand.

For example, the following example:

: root {--color:purple;} p {--color:green;} #alert {--color:red;} * {Color:var (--color);} <p> my purple inheritance root element </p><p> My green comes directly set </p><p id= ' alert ' >  ID selector weights higher, so Allah is red!  <p> I was also red, which accounted for the inherited light </p></p>

We can get this information from the above example:

1. Variables are also followed by the CSS selector, which has no effect if the selector of the variable and the element that uses the variable have no intersection. For example, a variable defined by #alert can be enjoyed only by an element with an ID of alert. If you want the variable to be used globally, you can set it on: root selector;

2. 
   

3. When there are multiple variables of the same name, the override rule of the variable is determined by the weight of the CSS selector, but there is no!important this usage, because it is not necessary,!important is designed to kill the JS style settings, but for the definition of variables there is no such requirement.

CSS property name can walk variable?

This is similar to the following:

body {    --bc:background-color;        var (--BC): #369;}

The answer is "no", if you can support it, then the compression of the CSS will be the inverse of the day, it is estimated that all the attributes will become one or two characters.

Does the CSS variable support multiple declarations at the same time?

This is similar to the following:

...

Sorry, not similar, grammar is not supported at all.

　　CSS variables use full syntax

The complete syntax for using CSS variables is: Var (in Chinese, VAR (< custom property name > [, < Default]?),

This means that if the variable we are using is not defined (note that it is limited to no definition), then the value that follows is used as the attribute value of the element. As an example:

. box {  --1: #369;} Body {  Background-color:var (--1, #cd0000);}

The background color at this point is #cd0000:

Default property for CSS variables not valid

Take a look at the following example:

body {  --color:20px;  Background-color: #369;  Background-color:var (--color, #cd0000);}

Excuse me, what is the background color of <body> at this time?

A. Transparent    B. 20px     c. #369      D. #cd0000

The answer is ......... ............. A. Transparent

I don't know if you got it right!

This is a very interesting point of CSS variables, for CSS variables, as long as the syntax is correct, even if the value inside the variable is a messy thing, but also as a normal declaration resolution, if the value of the variable is found to be illegal, such as the above background color can not be 20px, then use the background color of the default value, This is the default value instead, so the above CSS is equivalent to:

Body {--color:20px;background-color: #369; background-color:transparent;}

Do not assume that the equivalent of background-color:20px, which is why the above to emphasize the use of CSS default values are limited to variables not defined, not including the variable is not legal.

Space trailing properties of CSS variables

Take a look at the following example:

body {  --size:20;     Font-size:var (--size) px;}

Excuse me, what is the font-size size of <body> at this time?

If you think 20px is naïve, in fact, here Font-size:var (--size) PX is equivalent to font-size:20 px, note that there is a space behind 20, so, the font-size used here is <body> The default size of the element. Therefore, do not attempt to cancel the use of a numeric value to run through the entire audience, or use a sound approach:

body {  --size:20px;     Font-size:var (--size);}

or use CSS3 calc () to calculate:

body {  --size:20;     Font-size:calc (VAR (--size) * 1px);}

At this time the font-size size of,<body> is 20px,

Mutual transitive properties of CSS variables

That is, we can introduce other variables to our own use when we define CSS variables, for example:

Body {  --green: #4CAF50;     --backgroundcolor:var (--green);}

or more complex calculations using CSS3 calc (), for example:

body {  --columns:4;  --margins:calc (24px/var (--columns));}

For complex layouts, this cross-passing and direct reference to CSS variables can simplify our code and implementation costs, especially when it comes to dynamic layout, whether the CSS is responsive or the JS-driven layout changes.

Let's look at a CSS variable and a responsive layout example, you can click here: CSS variable and responsive layout instance demo

The default is 4 columns, such as:

With the browser width reduced, 4 columns may become 3 columns, 2 columns or even 1 columns, when we actually developed, obviously not only the column number changes, the width is small, often means the access device size is limited, at this time we tend to reduce the gap spacing and text size, so that the limited screen can display more content.

In other words, when we change the response, the value of the CSS property changed is not 1, but 3 or more, if we have 3 response points, is not at least 9 CSS declaration? However, since we have CSS variables, and CSS variables can be passed, when we encounter the response point, we only need to change a CSS property value.

Here is the demo core CSS code (only need to change--columns this variable):

. box {    --columns:4;    --margins:calc (24px/var (--columns));    --space:calc (4PX * VAR (--columns));    --fontsize:calc (20px-4/var (--columns));} @media screen and (max-width:1200px) {    . box {        --columns:3;    }} @media screen and (max-width:900px) {    . box {        --columns:2;    }} @media screen and (max-width:600px) {    . box {        --columns:1;    }}

So, we are in the 2 column effect is this, the size, spacing as the number of columns decreased also reduced, and then the spacing between each column is enlarged:

Have you ever felt that the CSS is getting cock! haha ~

Iii. concluding remarks

Since there is almost no article on CSS3 var (), the above syntax features for VAR () are obtained by looking at the canonical document, plus detailed tests. However, a person's ability is always limited, so there is bound to be a lot of VAR () variable interesting points did not find, therefore, we hope that if you find Var () Other interesting places, welcome comments to inform, we add in the article in time, convenient for you I he she it.

Multi-partner Projects I also use precompiled tools like Less/sass, but basically the variables, and other advanced features, are almost never used. So, if the browser supports the native CSS variables in all directions, I'll have to leave the tools like Less/sass.