Home > Article > Web Front-end > What are CSS variables? Learning about CSS variables: Inheritance & scope of CSS variables

What are CSS variables? Learning about CSS variables: Inheritance & scope of CSS variables

php是最好的语言Original: 2018-07-30 14:30:011861browse

What CSS variables can help us do

In some imperative programming languages, like Java, C or JavaScript, we can track certain states through variables. A variable is a symbol associated with a specific value, and the value of the variable can change over time.
In a declarative language like CSS, values that change over time do not exist, and there is no concept of variables.
CSS introduces the concept of hierarchical variables to easily cope with maintainability challenges. This will allow a variable to be symbolically referenced in the entire CSS tree

1. What is a CSS variable

CSS variables currently have two forms:

Variables , that is, having legal identifiers and legal values. Can be used anywhere. Variables can be used using the var() function. For example: var(--example-variable) will return the value corresponding to --example-variable
Custom attribute. These properties use the special format --where as their names. For example --example-variable: 20px; even a css declaration statement. It means assigning 20px to the --example-varibale variable

2. Variable declaration

Variable naming

The variable declaration uses two conjunction lines--to represent the variable, $color is a syntax that belongs to Sass, and @color is a syntax that belongs to Less. To avoid conflicts with css native variables, use --)

Note: Variable names are case-sensitive, --header-color and --Header-Color are two different variables

Declaration method

The CSS variable declaration method is very simple, as follows, a CSS named color is declared variable.

Write in the css file
Write in the inline-style of the html tag
Use JS to declare an element, method .style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)

Type of variable value

If the variable value is a string, it can be spliced with other strings

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}

If the variable value is a numerical value, it cannot be used directly with the numerical unit. You must use the calc() function to connect them

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

If the variable value has a unit, it cannot be written as a string

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

Note: The variable value can only be used as the attribute value, not the attribute name

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

In the above code, the variable --side is used as the attribute name, which is invalid

3. Inheritance & Scope of CSS Variables

Custom properties also support inheritance. If there is no custom attribute defined on an element, the value of the custom attribute will be inherited from its parent element

class="one">
  <p class="two">
    <p class="three">
    </p>
    <p class="four">
    </p>
  <p>
</p>

Define the following CSS:

.two { --test: 10px; }
.three { --test: 2em; }

In this example, var(--test) The result is:

class="two" corresponding node: 10px
class="three" corresponding node: element: 2em
class="four" corresponding node: 10px (inherited from its parent)
class="one" corresponding node: invalid value, that is, the value of this attribute is the default value that has not been overridden by the custom css variable

The top-level scope is: root

4. Responsiveness

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

5. Differences from preprocessor

1. Preprocessor variables are not real-time

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

Compilation results

.mediabox {
  background: #7F583F; 
}

2. Preprocessor cannot be limited Scope

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

Compile to

ul {
  color: blue; 
}

3. Preprocessor variables are not interoperable

Native CSS custom properties can be used with any CSS preprocessor or pure CSS file Use together

6. JS operation variables

CSS variables can interact with JS

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;

7. Compatibility

Check whether the browser supports CSS auto- Method of defining attributes

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}

Summary

Compared with traditional preprocessor variables such as LESS and SASS, the advantages of CSS variables are:

The dynamic nature of CSS variables can be changed while the page is running, while traditional preprocessor variables cannot be changed after compilation
CSS variables can be inherited, used in combination, and have scope
Used with Javascript, you can easily read/write from JS

Learning of PHP- -Variable variables,--Variable variables

php Learning log-Variable scope, variables