Compelling CSS variables (CSS Variable)

This is an exciting innovation.

A CSS variable, as its name implies, is the author of a Web page or a user-defined entity used to specify a specific variable in the document.

More accurately, it should be called CSS custom properties, but the following are called CSS variables for good understanding.

As we all know, there is no variable in the CSS, to use CSS variables, only with SASS or less such as the pre-compiler.

But after the new draft is published, it is no longer fanciful to define and use variables directly in CSS, as in the following, see a simple example:

Declare a variable:: root{  --bgcolor: #000;}

Here we have used the pseudo-class in the previous article 结构性伪类 :root{ } to :root{ } define a CSS variable in the global pseudo-class named --bgColor .

After the definition is used, suppose I want to set a div with a background color of black:

. main{  Background:var (--bgcolor);}

Here, we call through the places where we need to define the variables before we use var(定义的变量名) them.

Demo Poke Me--a simple example of CSS variables.

cascading and scoping of CSS variables

CSS variables are supported for inheritance, but it should be more appropriate to say cascading or cascading.

In CSS, the actual properties of an element are caused by its own properties and the cascading properties of its ancestors, and CSS variables support cascading attributes, and when an attribute is not defined in the current element, it will instead use the attributes of its ancestor element. Properties defined in the current element will overwrite the ancestor element with the same name attribute.

In fact, the scope, the popular point is that local variables will be scoped to the scope of global variables.

: root{  --maincolor:red;} div{  --maincolor:blue;  Color:var (--maincolor);}

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

It is also worth noting that CSS variables do not support!important declarations.

a combination of CSS variables

CSS variables can also be used in combination. Take a look at the following example:

<div></div>

The 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);}

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

Demo Stamp Me--a combination of CSS variables to use

CSS variables and Computed Properties calc ()

More interestingly, CSS variables can be used in conjunction with CSS3 's new function, Calc (), considering the following example:

<div> CSS Varialbe </div>

The CSS is as follows:

: root{  --margin:10px;} div{  Text-indent:calc (Var (--margin) *10)}

The above example, the CSS variable with the Calc function, gets the end result text-indent:100px .

Calc () is also an experimental feature that requires careful use.

Demo Poke Me--a combination of CSS variables and CALC functions

use of CSS variables

The advent of CSS variables, in the end, which solves the problem of our actual production? List some of the following:

1. The code is more consistent with the DRY (Don ' t repeat yourself) principle.

The color of a page, usually there are several main colors, the same color value in multiple places to use. The previous variable system for the less, sass preprocessor is complete, and CSS variables are now easy to do.

: root{  --maincolor: #fc0;} A number of places that need to be used for--maincolor. div1{  Color:var (--maincolor);}. div2{  Color:var (--maincolor);}

2, simplify the code, reduce redundancy, responsive media Query good helper

In general, when using media queries, we need to re-list the properties of the responsive changes.

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

Even less and SASS are not easy to do, but the advent of CSS variables makes media queries easier:

: root {   --mainwidth:1000px;  --leftmargin:100px;}. Main {  Width:var (--mainwidth);  Margin-left:var (--leftmargin);} @media screen and (min-width:1480px) {: root {   --mainwidth:800px;  --leftmargin:50px;}}

Look like a lot of code, a layer of definition of the link, just I here the example of CSS changes in the style of the property is less, when the number of media queries to a certain extent, the use of CSS variables from the code volume and aesthetic degree is a better choice.

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

CSS variables can also interact with JS.

: root{  --testmargin:75px;}

  read var root = getComputedStyle (document.documentelement), var cssvariable = Root.getpropertyvalue ('--testmargin '). Trim (); Console.log (cssvariable); ' 75px '//write Document.documentElement.style.setProperty ('--testmargin ', ' 100px ');

compared to traditional preprocessor variables such as less and SASS

Compared to traditional preprocessor variables such as less and SASS, the advantages of CSS variables are:

1. The dynamic nature of CSS variables can be changed while the page is running, while traditional preprocessor variables cannot be changed after compilation

2. CSS variables can be inherited, can be used in combination, have scope

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

Can I use?

Of course, the above example is normal if you are using a browser that already supports CSS variables:

When you see this article, there may have been a change, you can poke in to see Caniuse.

Reference Documents:

mdn-- using CSS variables

Why am I ' m excited about Native CSS Variables

This article is included in my CSS series articles, interested in can poke in to see.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

Compelling CSS variables (CSS Variable)