CSS Variable and cssvariable

Source: Internet
Author: User

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:



: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>


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


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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.