Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use the variable var of CSS3", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS3 variable var how to use" article.

Variables are a good thing.

In any language, the function of variables is the same, that is, it can reduce maintenance costs, along with the benefits of higher performance and higher file compression.

With the attention and popularity of the CSS precompilation tool Sass/Less/Stylus, the CSS working group quickly followed the specification of CSS variables, and many browsers have followed suit, which can be used directly in some projects.

Chrome/Firefox/Safari browsers are green and compatible much more than I expected, so decisively write down syntax usage and features.

II. Syntax, usage and features of CSS variable var ()

The native variable definition syntax in CSS is:-- *, and the syntax for variables is: var (--*), where * represents our variable name. With regard to naming, there are some indications in various languages, for example, the CSS selector cannot start with a number, and variables in JS cannot be numeric directly, but in CSS variables, these restrictions are absent, for example:

: root {--1: # 369;} body {background-color: var (--1);}

The background color is as follows:

However, it cannot contain characters such as $, [, ^, (,%, etc.). Ordinary characters are limited to the combination of "number [0-9]", "letter [a-zA-Z]", "underscore _" and "dash -", but can be Chinese, Japanese or Korean, for example:

Body {- dark blue: # 369; background-color: var (--dark blue);}

Therefore, we can directly use the Chinese name as a variable, even if the English CET-4 failed friends will not have the pressure, we do not need to hang a translator around at any time.

No matter the definition and use of variables can only be in the declaration block {}, for example, the following is not valid:

-- Dark Blue: # 369 X background-color {blue: var (--dark blue);}

If the definition of a variable, or declaration, is similar to the declaration of a CSS counter, you should get rid of the preconceived syntax of precompiled tools such as Sass/Less and understand the native variable of CSS as a CSS attribute.

This makes it much easier to understand when you apply rules to its weights and variables.

For example, the following example:

: root {--color: purple;} div {--color: green;} # alert {--color: red;} * {color: var (--color);}

My purple inherits from the root element

My green comes from directly setting the ID selector with a higher weight, so Allah is red!

I am also red, occupying the light of inheritance.

In the above example, we can get this information:

Variables also follow the CSS selector, and it will have no effect if the selector where the variable is located and the element that uses the variable do not intersect. For example, variables defined by # alert can only be enjoyed by elements whose id is alert. If you want variables to be used globally, you can set them on the: root selector

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 use of! important, because it is not necessary,! important is designed to kill the style setting of JS, but there is no such requirement for the definition of variables.

Can the CSS attribute name be a variable?

Something like this:

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

The answer is "no". If it can be supported, the compression of CSS will be reversed, and it is estimated that all attributes will become 1-2 characters.

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

Something like this:

...

I'm sorry, it can't be similar, but it's not supported at all in grammar.

The CSS variable uses the full syntax

The complete syntax used by the CSS variable is: var ([,]?), which is expressed in Chinese as: var ([

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.