CSS Variable and cssvariable

CSS Variable and cssvariable

This is an exciting innovation.

CSS variables, as the name implies, are used by the webpage author or user-defined entities to specify specific variables in the document.

More accurately, it should be called CSS custom attributes, but CSS variables are called for better understanding below.

We have always known that CSS has no variables. To use CSS variables, we can only use pre-compilers such as SASS or LESS.

However, after the new draft is published, it is no longer an illusion to define and use variables directly in CSS. For example, let's look at a simple example:

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

Here we use the help of the previous ArticleStructured pseudo-categoryIn:root{ }Pseudo class, in the global:root{ }The pseudo class defines a CSS variable named--bgColor.

After the definition is complete, it is used. Suppose I want to set the background color of a div to Black:

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

Here, we useVar (defined variable name).

Demo stamp me -- simple example of CSS variables.

CSS variable cascade and scope

CSS variables support inheritance, but it is more appropriate to say cascade or cascade.

In CSS, the actual attribute of an element is produced by its own attribute and the attribute of its ancestor element. CSS variables also support the cascade feature, if an attribute is not defined in the current element, the attribute of its ancestor element is used instead. The attributes defined by the current element overwrite the attributes of the same name of the ancestor element.

In fact, it is the scope. The common point is that local variables will overwrite global variables within the scope.

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

In the above example, the final variable that takes effect is--mainColor:blue.

In addition, it is worth noting that CSS variables are not supported! Important Declaration.

CSS variable combination

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

<div></div>

CSS:

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

The content of the above div is displayed as this is CSS Variable.

Demo stamp me -- use CSS variables in combination

 

CSS variables and computing attributes calc ()

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

<div> CSS Varialbe </div>

CSS:

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

In the preceding example, CSS variables are combined with calc functions. The final result is:text-indent:100px.

Calc () is also a function in the experiment. You must be careful when using it.

Demo stamp me -- Combination of CSS variables and Calc Functions

 

Usage of CSS Variables

The emergence of CSS variables solves our actual production problems? List:

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

The color of a page usually has several major colors. The same color value is used in multiple places. The variable system of the earlier LESS and SASS pre-processors completes this, and now CSS variables can also be easily implemented.

: Root {-- mainColor: # fc0;} // multiple -- mainColor fields to be used. div1 {color: var (-- mainColor );}. div2 {color: var (-- mainColor );}

2. Simplified code, reduced redundancy, and a good helper for responsive media queries

In general, when using media queries, We Need To relist all attributes that will be changed in response.

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

Even LESS and SASS cannot be simpler, but the emergence of CSS variables makes media queries 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;}}

It looks like there are too many codes and there is an additional layer of definition, but the CSS in my example here changes a small number of style attributes. When the number of media queries reaches a certain level, using CSS variables is a better choice in terms of code size and aesthetics.

3. Easy reading/writing from JS and unified Modification

CSS variables can also interact with JS.

:root{  --testMargin:75px;}

// Read var root = getComputedStyle(document.doc umentElement); var cssVariable = root. getPropertyValue ('-- testMargin '). trim (); console. log (cssVariable); // '75px '// write to document.doc umentElement. style. setProperty ('-- testMargin', '100px ');

 

Comparison with Preprocessor variables such as traditional LESS and SASS

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

 

Can I Use?

Of course, the premise for the above example to display normally is that your browser already supports CSS variables:

When you see this article, it may have changed. You can stamp it to see CANIUSE.

References:

MDN -- use CSS Variables

Why I'm Excited About Native CSS Variables

 

This article is included in my CSS series. If you are interested, you can stamp it.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.