CSS Variable description and Tutorials

CSS is an essential language for our front-end development, it will make our development very efficient, it has always been, CSS is no variable, to use CSS variables, only with SASS or less such a pre-compiler. This March, Microsoft announced that Edge browser will support CSS variables. This important new CSS feature has been supported by all major browsers. This article provides a full description of how to use it, and you will find that native CSS becomes exceptionally powerful. This article will work with you to learn some of the usage of CSS variables.

I. Declaration of variables

When declaring a variable, add two conjunctions (--) before the variable name.

Body {  --foo: #7F583F;  --bar: #F7EFD2;}

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

They are no different from formal attributes such as color, font-size, but no default meaning. So CSS variables (CSS variable) are also called "CSS Custom Properties" (CSS). Because variables are actually one thing with custom CSS properties.

You might ask, why choose two conjunction lines (--) to represent variables? Because $foo was used by Sass, @foo was less used. In order not to create a conflict, the official CSS variable is replaced by two conjunction lines.

Various values can be placed into CSS variables.

: root{  --main-color: #4d4e53;  --main-bg:rgb (255, 255, 255);  --logo-border-color:rebeccapurple;  --header-height:68px;  --content-padding:10px 20px;  --base-line-height:1.428571429;  --transition-duration:. 35s;  --external-link: "External link";  --margin-top:calc (2VH + 20px);}

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

Second, VAR () function

The Var () function is used to read the variable.

A {  color:var (--foo);  Text-decoration-color:var (--bar);}

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 (--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, 10px 15px 20px), VAR () function can also be used in the declaration of a variable. : root {  --primary-color:red;  --logo-text:var (--primary-color);}

Note that variable values can only be used as property values and cannot be used as property names.

. foo {  --side:margin-top;  /* Invalid *  /var (--side): 20px;}

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

III. Types of variable values

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

--bar: ' Hello ';--foo:var (--bar) ' World ';

Using this, you can debug (example).

Body:after {  content: '--screen-category: ' var (--screen-category);}

If the value of a variable is numeric, it cannot be directly associated with a numeric unit.

. foo {  --gap:20;  /* Invalid *  /Margin-top:var (--GAP) px;}

In the above code, the values are written directly with the units, which is not valid. 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, which can be declared within multiple selectors. When read, the highest-priority declaration takes effect. This is consistent with CSS's "cascading" (cascade) rules.

Here is an example.

<style>  : root {--color:blue;}  div {--color:green;}  #alert {--color:red;}  * {Color:var (--color);} </style><p> Blue </p><div> Green </div><div id= "alert" > Red </div>

In the above code, three selectors declare the--color variable. 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.

Body {  --foo: #7F583F;}. Content {  --bar: #F7EFD2;}

In the above code, the scope of the variable--foo is the effective scope of the body selector, and the scope of the--bar is the effective range of the. Content Selector.

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

: root {  --main-color: #06c;}

Five, responsive layout

CSS is dynamic, and any changes to the page can lead to changes in the rules used.

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

Body {  --primary: #7F583F;  --secondary: #F7EFD2;} A {  color:var (--primary);  Text-decoration-color:var (--secondary);} @media screen and (min-width:768px) {  body {    --primary:  #F7EFD2;    --secondary: #7F583F;  }}

Six, compatibility processing

For browsers that do not support CSS variables, you can use the following notation.

A {  color: #7F583F;  Color:var (--primary);}

You can also use the @support command to detect.

@supports ((--a:0)) {/  * supported */} @supports (not (--a:0)) {/  * not supported */}

Vii. JavaScript Operations

JavaScript can also detect whether the browser supports CSS variables.

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

The JavaScript action CSS variable is written as follows.

Set the variable document.body.style.setProperty ('--primary ', ' #7F583F ');//Read variable Document.body.style.getPropertyValue ('-- Primary '). Trim ();//' #7F583F '//delete variable document.body.style.removeProperty ('--primary ');

This means that JavaScript can store any value in a style sheet. The following is an example of a listener event in which the event information is stored in a CSS variable.

Const Docstyle = Document.documentelement.style;document.addeventlistener (' MouseMove ', (e) = = {  Docstyle.setproperty ('--mouse-x ', e.clientx);  Docstyle.setproperty ('--mouse-y ', E.clienty);});

Those that are useless to CSS can also be placed in CSS variables.

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

In the above code, the value of--foo is an invalid statement inside the CSS, but it can be read by JavaScript. This means that the style settings can be written in a CSS variable for JavaScript to read.

Therefore, CSS variables provide a way for JavaScript to communicate with CSS.

About the CSS variable knowledge point, I believe you have mastered a lot, I hope this tutorial can help you at work.

Related tutorials:

New knowledge: CSS variable-variable

First CSS variable: currentcolor_html/css_web-itnose

CSS variables try playing _html/css_web-itnose