This is an exciting innovation.

CSS variables, as the name suggests, are entities defined by the author or user of a web page to specify specific variables in the document.

It is more accurate to call them CSS custom properties, but they will be referred to as CSS variables for better understanding.

It has long been known that CSS has no variables, and that the only way to use CSS variables is with a precompiler like SASS or LESS.

However, with the release of the new draft, it is no longer a fantasy to define and use variables directly in CSS, as shown in the following simple example:

// Declare a variable: :root{--bgColor:#000; }Copy the code

Here we draw on the previous articleStructural pseudoclassIn the:root{ }Pseudo class, global:root{ }The pseudo class defines a CSS variable named--bgColor 。

Let’s say I want to set the background color of a div to black:

.main{
  background:var(--bgColor);
}Copy the code

Here, where we need to use the variables we defined earlier, we passVar (defined variable name)To invoke.

Simple examples of CSS variables.

Cascade and scope of CSS variables

CSS variables support inheritance, but cascading or cascading is more appropriate.

In CSS, the actual properties of an element are superimposed on the properties of its own element and on the properties of its ancestor element. CSS variables also support cascading properties. When a property is not defined in the current element, the property of its ancestor element is used instead. Attributes defined in the current element will override attributes of the same name of the ancestor element.

In fact, this is called scope, which means that a local variable overrides a global variable in scope.

:root{
  --mainColor:red;
}
 
div{
  --mainColor:blue;
  color:var(--mainColor);
}Copy the code

The variable that finally takes effect in the example above is--mainColor:blue.

It is also worth noting that CSS variables are not supported! Important statement.

Combinations of CSS variables

CSS variables can also be combined. Consider the following example:


       

Copy the code

CSS is as follows:

:root{
  --word:"this";
  --word-second:"is";
  --word-third:"CSS Variable";
}
 
div::before{
  content:var(--word)' 'var(--word-second)' 'var(--word-third);
}Copy the code

The contents of the div above will display as this is CSS Variable.

Demo – A combination of CSS variables

CSS variables and calculation properties calc()

More interestingly, CSS variables can be used in conjunction with the new CSS3 function calc(). Consider the following example:


         

           CSS Varialbe 
         
Copy the code

CSS is as follows:

:root{
  --margin: 10px;
}
 
div{
  text-indent: calc(var(--margin)*10)
}Copy the code

In the example above, the CSS variable combined with the calc function yields the final resulttext-indent:100px 。

Calc () is also an experimental feature and should be used with caution.

Demo – a combination of CSS variables and Calc functions

Use of CSS variables

What real production problems do CSS variables solve? To name a few:

1. Code is more DRY (Don’t Repeat Yourself).

A color scheme for a page, usually with several primary colors, where the same color value is used in more than one place. The variable systems of the LESS and SASS preprocessors did this, and CSS variables can now do it with ease.

:root{ --mainColor:#fc0; } div1{color:var(--mainColor); } .div2{ color:var(--mainColor); }Copy the code

2, streamlined code, reduce redundancy, responsive media query good helper

In general, when using media queries, we need to relist all the properties that will be changed in response.

.main { width: 1000px; margin-left: 100px; } @media screen and (min-width:1480px) { .main { width: 800px; margin-left: 50px; }}Copy the code

Even LESS and SASS aren’t much easier, but CSS variables make media queries much simpler:

:root { --mainWidth:1000px; --leftMargin:100px; } .main { width: var(--mainWidth); margin-left: var(--leftMargin); } @media screen and (min-width:1480px) { :root { --mainWidth:800px; --leftMargin:50px; }}Copy the code

It looks like there is more code and a layer of definition, but the CSS in my example here changes fewer style properties. When the number of media queries reaches a certain point, using CSS variables is a better choice in terms of the amount of code and aesthetics.

3, easy to read/write from JS, unified modification

CSS variables can also interact with JS.

:root{
  --testMargin:75px;
} Copy the code

Var root = getComputedStyle(document.documentElement); var cssVariable = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable); / / / / '75 px' written document. The documentElement. Style. The setProperty (' -- testMargin ', '100 px);Copy the code

Compare with traditional preprocessor variables such as LESS and SASS

Compared with traditional preprocessor variables such as LESS and SASS, CSS variables have the following advantages:

  1. CSS variables are dynamic and can be changed at runtime, whereas traditional preprocessor variables cannot be changed after compilation

  2. CSS variables can be inherited, combined, and scoped

  3. With Javascript, it is easy to read/write from JS

Can I Use?

Of course, the examples above will only work if you use a browser that already supports CSS variables:

By the time you read this article, you may have changed, so poke in to see CANIUSE.

References:

MDN–Using CSS variables

Why I’m Excited About Native CSS Variables

This article is included in my CSS series, if you are interested, you can poke it in.

To the end of this article, if there are any questions or suggestions, you can exchange more, original articles, writing is limited, talent is shallow, if there is a wrong place, hope to inform.