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

How to analyze css variables, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Those who have used sass or less all know that mainly they can have nesting and variables as well as function functions, in fact, in the native css, has gradually begun to support, it is true that only you and I are familiar with it, while others are still in the bud, understand css variables, you will find that CSS has become extremely powerful since then.

Declaration of variables

When declaring a variable, the variable name is preceded by two hyphens (-).

/ / Local declaration body {--foo: # ed145b;-- bar: # F7EFD2;} / / Global declaration: root {--foo: # ed145b;-- bar: # F7EFD2;}

For example, above we declared two variables:-- foo and-- bar, in fact, you only need to understand them as css custom attributes, they are no different from color, font-size and other formal attributes, but there is no default meaning, note that css variable names are case-sensitive, usually we write css is not differentiated.

You might ask, why did you choose two hyphens (- -) to represent variables? Because $foo is used by Sass, @ foo is used by Less. In order to avoid conflict, the official CSS variable is changed to two hyphens.

Naming convention

With regard to naming, there are some indications in various languages. For example, CSS selectors cannot start with numbers, and variables in JS cannot be numerically valued directly. However, in CSS variables, these restrictions are absent, such as:

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

Cannot contain characters such as $, [, ^, (,%, etc.). Ordinary characters are limited to combinations 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);} var () function

After the variable is declared, we naturally want to get it and use it, so the var () function is used to read the variable.

P {color: var (--foo); border::1px solid var (--bar);}

The second parameter of var ()

Color: var (--foo, # ED145B); / / the second parameter is the default value. If-foo is empty, # ED145B will be used.

The var () function can also be used in the declaration of variables

: root {--primary-color: red;-- logo-text: var (--primary-color); / / just declared above, you can use} here.

Variable value can only be used as attribute value, not as attribute name

.foo {--side: margin-top; / * obviously, the following is an invalid * / var (--side): 20px;} variable value type

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

-- bar: 'hello';--foo: var (--bar)' world';// example body:after {content:'--screen-category: 'var (--screen-category);}

If the variable value is a numeric value, it cannot be used directly with the numeric unit

Foo {--gap: 20; / * invalid * / margin-top: var (--gap) px; / * calculated by calc, the following is valid * / margin-top: calc (var (--gap) * 1px);}

If the value of a variable has a unit, it cannot be written as a string

/ * invalid * / .foo {--foo: '20pxspell; font-size: var (--foo);} / * valid * / .foo {--foo: 20px; font-size: var (--foo);} scope

The same CSS variable can be declared in multiple selectors. When reading, the declaration with the highest priority takes effect. This is consistent with CSS's "cascade" rule.

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

blue

Green, red.

In the above code, all three selectors declare the-- color variable. When different elements read this variable, they will use the highest priority rule, so the color of the three paragraphs of text is different.

Compatibility processing

For browsers that do not support CSS variables, you can write it as follows.

A {color: # 7F583F; color: var (--primary); / / it should be easy to understand. If the value cannot be read here, then the color} above will not be overwritten.

You can also use the @ support command to detect

A {@ supports ((--a: 0)) {/ * supported * /} @ supports (not (--a: 0)) {/ * not supported * /} JavaScript operation (essence)

JavaScript can also detect whether browsers support CSS variables.

Const isSupported = window.CSS & & window.CSS.supports & & window.CSS.supports ('--averse, 0); if (isSupported) {/ * supported * /} else {/ * not supported * /}

The JavaScript operation CSS variable is written as follows

/ / set variable document.body.style.setProperty ('--primary','# 7F583F'); / / Local document.documentElement.style.setProperty ('--primary','# 7F583F'); / / Global / / read variable document.body.style.getPropertyValue ('--primary'). Trim (); / Local document.documentElement.style.getPropertyValue ('--primary'). Trim (); / Global getComputedStyle (document.documentElement) .getPropertyValue ('--time') / / Global, if it is set in the css table, you need to get / /'# 7F583F'// delete variable document.body.style.removeProperty ('--primary'); / / Local document.documentElement.style.removeProperty ('--primary'); / / Global

This means that JavaScript can store any value in the stylesheet. Here is an example of listening for events in which event information is stored in the CSS variable

Const docStyle = document.documentElement.style;document.addEventListener ('mousemove', (e) = > {docStyle.setProperty ('-- mouse-x', e.clientX); docStyle.setProperty ('--mouse-y', e.clientY);})

This means that JavaScript can store any value in the stylesheet. Here is an example of listening for events in which event information is stored in the CSS variable

Const docStyle = document.documentElement.style;document.addEventListener ('mousemove', (e) = > {docStyle.setProperty ('-- mouse-x', e.clientX); docStyle.setProperty ('--mouse-y', e.clientY);})

Information that is useless to CSS can also be put into the CSS variable.

-- foo: if (x > 5) this.width = 10

In the above code, the value of-- foo is an invalid statement in CSS, but can be read by JavaScript. This means that you can write the style settings in the CSS variable for JavaScript to read. Therefore, the CSS variable provides a way for JavaScript to communicate with CSS.

The answer to the question on how to analyze css variables is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.