Those who have used sass or less know that they can mainly have nesting, variable and function functions. In fact, they have begun to gradually support in the native CSS. It is true that only you and I know well at present, while others are still in the bud. If you understand CSS variables, you will find that CSS has become extremely powerful.

Declaration of variables

When declaring a variable, add two conjunctions (–) before the variable name

// Local declaration
body {
  --foo: #ed145b;
  --bar: #F7EFD2;
}

// Global declaration
:root{
  --foo: #ed145b;
  --bar: #F7EFD2;

}

For example, we stated two variables above: – foo and – bar. In fact, you only need to understand them as css custom attributes. They are no different from formal attributes such as color and font size, but they have no default meaning. Note that css variable names are case sensitive, and we usually write css differently.

You may ask, why do you choose two conjunctions (–) to represent variables? Because $foo was used by Sass and @ foo was used by Less. In order to avoid conflict, the official CSS variables are changed to two conjunctions.

Naming conventions

For naming, there are some displays in various languages. For example, CSS selectors cannot start with numbers, and variables in JS cannot be directly numeric. However, these restrictions are not in CSS variables, such as:

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

It cannot contain $, [, ^, (,%) and other characters. Ordinary characters are limited to the combination of "number [0-9]," letter [a-zA-Z], "underscore" and "dash -", but can be Chinese, Japanese or Korean, for example:

body {
  --Dark blue: #369;
  background-color: var(--Dark blue);
}

var() function

After declaring the variable, we naturally want to get and use it, so the var() function is used to read the variable

p {
  color: var(--foo);
  border::1px solid var(--bar);
}

var() second parameter

color: var(--foo, #ED145B); //The second parameter is the default value. If -- foo is null, it will use #ED145B

The var() function can also be used in the declaration of variables

:root {
  --primary-color: red;
  --logo-text: var(--primary-color); // Just stated above, it can be used here
}

Variable values can only be used as attribute values, not attribute names

.foo {
  --side: margin-top;
  /* Obviously, the following is invalid */
  var(--side): 20px;
}

Variable value type

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

--bar: 'hello';
--foo: var(--bar)' world';

// Example
body:after {
  content: '--screen-category : 'var(--screen-category);
}

If the variable value is a numeric value, it cannot be used directly with the numerical unit

foo {
  --gap: 20;
  /* Invalid below */
  margin-top: var(--gap)px;
 /* Calculate through calc, and the following is valid */
  margin-top: calc(var(--gap) * 1px);
}

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

/* invalid */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* Effective */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

Scope

The same CSS variable can be declared in multiple selectors. When reading, the declaration with the highest priority takes effect. This is consistent with the "cascade" rule of CSS

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>blue</p>
<div>green</div>
<div id="alert">gules</div>

In the above code, all three selectors declare the – color variable. When different elements read this variable, the rule of the highest priority will be adopted, so the colors of the three paragraphs of text are different.

Compatibility processing

For browsers that do not support CSS variables, you can use the following writing method.

a {
  color: #7F583F;
  color: var(--primary); // It should be well understood that if the value cannot be read here, the color above will not be overwritten
}

You can also use the @ support command to detect

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

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

JavaScript operation (essence)

JavaScript can also detect whether the browser supports CSS variables

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript operation CSS variables are written as follows

// set variable
document.body.style.setProperty('--primary', '#7F583F '); / / local
document.documentElement.style.setProperty('--primary', '#7F583F '); / / Global

// Read variable
document.body.style.getPropertyValue('--primary').trim(); /local
document.documentElement.style.getPropertyValue('--primary').trim(); /overall situation
getComputedStyle(document.documentElement).getPropertyValue('--time'); // Global. If it is set in the css table, it needs to be obtained in this way
// '#7F583F'

// Delete variable
document.body.style.removeProperty('--primary'); //local
document.documentElement.style.removeProperty('--primary'); //overall situation

This means that JavaScript can store any value in the style sheet. The following is an example of listening to events, and the event information is stored in CSS variables

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

This means that JavaScript can store any value in the style sheet. The following is an example of listening to events, and the event information is stored in CSS variables

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

Information that is useless to CSS can also be put into CSS variables

--foo: if(x > 5) this.width = 10;

In the above code, the value of – foo is an invalid statement in CSS, but it can be read by JavaScript. This means that the style settings can be written in CSS variables for JavaScript to read. Therefore, CSS variables provide a way for JavaScript to communicate with CSS.

Summary

• Browser native features can run directly without any translation
• As a member of DOM object, it greatly facilitates the connection between CSS and JS
• It doesn't prevent you from using Sass/Less. It can be used in combination