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

Editor to share with you how to use variables in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

I. declaration of variables

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

Body {

-- foo:#7F583F

-- bar:#F7EFD2

}

In the above code, two variables are declared in the body selector:-- foo and-- bar.

They are no different from formal properties such as color, font-size, but have no default meaning. So the CSS variable (CSSvariable) is also called "CSS custom attribute" (CSScustomproperties). Because variables and custom CSS properties are actually the same thing.

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.

Various values can be put into the CSS variable.

: root {

-- main-color:#4d4e53

-main-bg:rgb (255255255)

-- logo-border-color:rebeccapurple

-- header-height:68px

-- content-padding:10px20px

-- base-line-height:1.428571429

-- transition-duration:.35s

-external-link: "externallink"

-- margin-top:calc (2vh+20px)

}

Variable names are case-sensitive,-- header-color and-- Header-Color are two different variables.

Second, var () function

The var () function is used to read variables.

A {

Color:var (--foo)

Text-decoration-color:var (--bar)

}

The var () function can also take the second argument, which represents the default value of the variable. If the variable does not exist, this default value is used.

Color:var (--foo,#7F583F)

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

Var (--font-stack, "Roboto", "Helvetica")

Var (--pad,10px15px20px)

The var () function can also be used to declare variables.

: root {

-- primary-color:red

-logo-text:var (--primary-color)

}

Note that the variable value can only be used as an attribute value, not as an attribute name.

.foo {

-- side:margin-top

/ * invalid * /

Var (--side): 20px

}

In the above code, the variable-- side-- is used as the attribute name, which is invalid.

Third, the type of variable value

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

-- bar:'hello'

-- foo:var (--bar) 'world'

Taking advantage of this, you can debug (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

}

In the above code, the value is written directly with the unit, which is invalid. You must use the calc () function to connect them.

.foo {

-- gap:20

Margin-top:calc (var (--gap) * 1px)

}

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

/ * invalid * /

.foo {

-- foo:'20px'

Font-size:var (--foo)

}

/ * valid * /

.foo {

-- foo:20px

Font-size:var (--foo)

}

IV. 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.

Here is an example.

: root {--color:blue;}

P {--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.

That is, the scope of a variable is the valid scope of the selector in which it is located.

Body {

-- foo:#7F583F

}

.content {

-- bar:#F7EFD2

}

In the above code, the scope of the variable-- foo-- is the scope of the body selector, and the scope of-- bar is the scope of the .content selector.

For this reason, global variables are usually placed in the root element: root, making sure that any selector can read them.

: root {

-- main-color:#06c

}

5. Responsive layout

CSS is dynamic, and any change in the page will lead to a change in the rules adopted.

With this feature, variables can be declared in the media command of a responsive layout, so that different screen widths have different values of variables.

Body {

-- primary:#7F583F

-- secondary:#F7EFD2

}

A {

Color:var (--primary)

Text-decoration-color:var (--secondary)

}

@ mediascreenand (min-width:768px) {

Body {

-- primary:#F7EFD2

-- secondary:#7F583F

}

}

VI. Compatibility treatment

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

A {

Color:#7F583F

Color:var (--primary)

}

You can also use the @ support command for detection.

@ supports ((--apur0)) {

/ * supported*/

}

@ supports (not (--apur0)) {

/ * notsupported*/

}

7. JavaScript operation

JavaScript can also detect whether browsers support CSS variables.

ConstisSupported=

Window.CSS&&

Window.CSS.supports&&

Window.CSS.supports ('--astatine 0)

If (isSupported) {

/ * supported*/

} else {

/ * notsupported*/

}

The JavaScript operation CSS variable is written as follows.

/ / set variables

Document.body.style.setProperty ('--primary','#7F583F')

/ / read variables

Document.body.style.getPropertyValue ('- primary'). Trim ()

/ /'# 7F583F'

/ / Delete variables

Document.body.style.removeProperty ('--primary')

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

ConstdocStyle=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 above is all the content of this article "how to use variables in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.