Introduction to native variable var in CSS/CSS3-CSS Tutorial-php.cn

Introduction to native variable var in CSS/CSS3

一个新手

Release： 2017-10-26 09:33:51

Original

2669 people have browsed it

Use syntax

First let’s look at an example:
html code:

<p class="element">这是一段文字</p>

Copy after login

css code:

.element {
  width:200px;
  height:200px;
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

Copy after login

Achievement effect:

The result is that the background of the DOM element becomes black.

The native variable definition syntax in CSS is: --*, and the variable usage syntax is: var(--*), where * represents our variable name. Regarding naming, various languages have some indications. For example, CSS selectors cannot start with a number, and variables in JS cannot be directly numerical. However, in CSS variables, these restrictions are not present, for example:

:root{
    --main-bg-color: #000;
}.element {
    background-color: var(--main-bg-color);
}

Copy after login

Note: Variable names cannot contain $, [, ^, (, % and other characters, Ordinary characters are limited to "numbers [0-9]" "letters [a-zA-Z] " "underline_" and "dash- " These combinations, but can be Chinese, Japanese or Korean, for example:

.element {
  width:200px;
  height:200px;
  --黑色: #000;
  color:#fff;
  background-color: var(--黑色);
}

Copy after login

Full syntax of css variables: The complete syntax used by CSS variables is:
var( [, ]? ), which in Chinese is: var( [, , that is, if we do not define a variable name, then the following value will be used as its The default attribute value. is as follows:

.element {
    background-color: var(--new-bg-color,#EE0000);
}

Copy after login

The result obtained is of course the background of the value of the following color

Let’s take a look at the variable name. What will happen if it is illegal? See the following example:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

Copy after login

What is the background color of at this time?

A. transparent

B. 20px
C. #369
D. #cd0000
The answer is:

A. transparent CSS variable, it is found that the variable value is Illegal, for example, the background color above obviously cannot be 20px, then the default value of the background color, which is the default value, is used instead. Therefore, the above CSS is equivalent to:

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

Copy after login

Application of css variables in js

Look at the following example, html code:

<p id="jsDom">这是一段文字</p>

Copy after login

css code:

#jsDom {
    --my-varwidth: 200px;
    background-color: #000;
    color:#fff;
    width:var(--my-varwidth);
    height:200px;
}

Copy after login

js code:

var element = document.getElementById(&#39;jsDom&#39;);var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px//设置过后该DOM元素的宽度变为了300pxelement.style.setProperty("--my-varwidth", &#39;300px&#39;);

Copy after login

What if the style is written between lines? Then do the following:

html code:

<p id="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">这是一段文字</p>

Copy after login

js code:

var element = document.getElementById(&#39;jsDom&#39;);var curWidth = element.style.getPropertyValue("--my-varwidth");
console.log(curWidth); //400px

Copy after login

Browser compatibility

The browser compatibility is as shown in the figure:

As of now, IE11 does not support this css variable.

Speaking of which, I feel that this css variable is also very powerful. So compared with the preprocessor, which one do you think is better? Let’s talk about the disadvantages of preprocessors.

Preprocessor disadvantages

Preprocessor variables are not real-time

Perhaps surprising to newbies, the most common preprocessor limitation is that Sass cannot be used in media Define variables in the query or use @extend.

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

Copy after login

The above code will compile to:

.Container { 
     padding: 1em;
 }

Copy after login

As can be seen from the above results, the media query block is discarded, Variable assignments are ignored.

Since there is no way to vary variables based on matching @media rules, the only option is to assign a unique variable to each media query and write each variation individually.

Preprocessor variables cannot be cascaded

Whenever variables are used, scope problems inevitably arise. Should this variable be set as a global variable? Should it be scoped to files or modules? Should it be restricted to blocks?

Since the ultimate purpose of CSS is to add styles to HTML, it turns out that there is another effective way to scope variables: DOM elements. But since the preprocessors don't run in the browser and can't see the markup, they can't do this.

Suppose there is a website. For users who prefer larger text, add the class

# to the

element. ##user-setting-large-text. When this class is set, larger $font-size variable assignments should be applied:

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} body { 
    font-size: $font-size; 
}

Copy after login

但同样，就像上面的媒体块示例，Sass完全忽略了该变量的赋值，这意味着这是不可能发生的。编译后的代码如下：

body { 
    font-size: 1em;
}

Copy after login

预处理器变量不继承

虽然继承严格说来是级联的一部分，之所以把它单独分出来讲，是因为多次想调用这个特性却不得。

假设一种情况，要在DOM元素上基于其父元素应用的颜色而设置样式：

.alert {
    background-color: lightyellow;
}.alert.info {
    background-color: lightblue;
}.alert.error {
    background-color: orangered;
}.alert button {
    border-color: darken(background-color, 25%);
}

Copy after login

上面的代码并不是有效的Sass（或CSS），但你应该明白它想达到什么目的。

最后一句声明试图在