(Turn) CSS Variables Tutorial

http://www.ruanyifeng.com/blog/2017/05/css-variables.html

1. Declaration of variables When
declaring variables, add two hyphens (--) in front of the variable name.

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}
In the above code, two variables are declared in the body selector: --foo and --bar.
They are no different from formal properties like color, font-size, etc., except that they have no default meaning. So CSS variable (CSS variable) is also called "CSS custom properties" (CSS custom properties). Because variables and custom CSS properties are the same thing.
You might ask, why did you choose two hyphenated lines (--) to represent variables? Because $foo is used by Sass and @foo is used by Less. To avoid conflicts, the official CSS variables use two hyphenated lines instead.
Various values ​​can be put into CSS variables.

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding : 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}
variable names are case sensitive, --header-color and --Header- Color are two different variables.
Second, var () function The
var () function is used to read variables.

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}
The var() function can also take a second parameter, which represents the default value of the variable. If the variable does not exist, the default value will be used.

color: var(--foo, #7F583F);
The second parameter does not deal with internal commas or spaces, which are regarded as part of the parameter.

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
The var() function can also be used in variable declarations.

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}
Note that variable values ​​can only be used as property values, not property names.

.foo {
  --side: margin-top;
  /* invalid*/
  var(--side): 20px;
}
In the above code, the variable --side is used as the property name, which is invalid.
Third, the type of variable value
If variable value is a string, it can be spliced ​​with other strings.

--bar: 'hello';
--foo: var(--bar)' world';
Use this to debug (example).

body:after {
  content: '--screen-category : 'var(--screen-category);
}
If the variable value is a numerical value, it cannot be used directly with the numerical unit.

.foo {
  --gap: 20;
  /* invalid*/
  margin-top: var(--gap)px;
}
In the above code, the value and unit are written directly together, which is invalid. They must be connected using the calc() function.

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
If the variable value has a unit, it cannot be written as a string.

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

/* valid*/
.foo {
  --foo: 20px;
  font-size: var(--foo);
}
Fourth, scope
The same CSS variable can be declared within multiple selectors. When read, the declaration with the highest priority takes effect. This is consistent with CSS "cascade" rules.
Below is an example.

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

<p >blue</p>
<div>green</div>
<div id="alert">red</div>
In the above code, the three selectors all declare the --color variable. When different elements read this variable, the rule with the highest priority will be used, so the colors of the three paragraphs of text are different.
That is, the scope of the variable is the valid scope of the selector it is in.

body {
  --foo: #7F583F;



  --bar: #F7EFD2;
}
In the above code, the scope of the variable --foo is the effective scope of the body selector, and the scope of --bar is the effective scope of the .content selector.
For this reason, global variables are usually placed inside the root element :root to ensure that any selector can read them.

:root {
  --main-color: #06c;
}
5. Responsive layout
CSS is dynamic, and any changes to the page will lead to changes in the adopted rules.
Using this feature, variables can be declared in the media command of the responsive layout, so that different screen widths have different variable values.

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width : 768px) {
  body {
    --primary: #F7EFD2;
    --secondary: #7F583F;
  }
}
6. Compatibility processing
For browsers that do not support CSS variables, the following can be used.

a {
  color: #7F583F;
  color: var(--primary);
}
can also be detected using the @support command.

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

@supports ( not (--a: 0)) {
  /* not supported */
}
7. JavaScript operating
JavaScript can also detect whether the browser supports it CSS variables.

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

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}
JavaScript action CSS variables are written as follows.

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

// read variable
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// Remove the variable
document.body.style.removeProperty('--primary');
This means that JavaScript can store arbitrary values ​​into the stylesheet. The following is an example of listening to events, 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 invalid in CSS, but can be read by JavaScript. This means that style settings can be written in CSS variables and read by JavaScript.
So, CSS variables provide a way for JavaScript to communicate with CSS.