The original link: segmentfault.com/a/119000001…

Welcome to visit personal blog website: www.zhuxin.club

preface

Complex sites have a lot of CSS code and often have a lot of duplicate values. For example, the same color value can be used in hundreds or thousands of places, and if it changes, it needs to be searched globally and replaced one by one. Custom properties store a value in one place and reference it in many other places. Another benefit is semantic identification. For example, –main-text-color is easier to understand than #00ff00, especially if the color value is used in other contexts.

Before the advent of CSS custom properties, CSS variables were only available in some CSS preprocessors, such as LESS, SCSS, etc

Declaration and use of variables

CSS selectors cannot start with a number, and JS variables cannot be directly numeric. However, CSS variables do not have these limitations. Common characters are limited to digits [0-9], letters [A-za-z], underscores (_), and dash -, but can be Chinese, Japanese, or Korean characters.

1. Declaration: case sensitive, –variable-name: variable-value;

:root{-color: red;
}
Copy the code

2. Use: Use var to use a variable

#div {
    color: var(color)
}
Copy the code

3. Combine variables

When variables are used, they are usually not used single. they can be combined. When variables are strings, they can be concatenated as follows

:root{
  --screen-category: 'category'// The variable value is a string}body:after {
  content: '--screen-category: 'var(--screen-category); // direct splice}Copy the code

When the value of a variable is numeric, it must be computed using the calc() function, even if it is a simple concatenation of units

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

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

4. Variables are not defined or incorrectly defined

If the variable we are using is not defined, use the following value as the attribute value of the element, as shown below: body is not accessible in. Box –1, so use #cd0000

.box{-1: # 369; 
}
body {
  background-color: var(--1.#cd0000);
}
Copy the code

If a variable has been defined but its value is incorrect, the default value is used. For example:

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

The result is that the body color is transparent, because background-color is transparent by default

Inheritance and scope

1. Scope

Use :root{} to define global CSS variables. To make variables available locally, define them under a specific selector

:root{
  color: red; // globally available}.box{-1: # 369; / / only.boxThis scope is available}body {
  background-color: var(--1.#cd0000);
}
Copy the code

2. The inheritance

<div class="wrapper">
   <div class="content1"></div>
   <div class="content2"></div>
</div>

.wrapper{-color: red;
}

.content1{-color: yellow;
}
Copy the code

Content1 –color = yellow Content2 –color is undefined, inherits the Wrapper –color = red –color: yellow is only valid within the scope of content1

Js manipulates CSS variables

:root{-color: red;
}
Copy the code
/ / read
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'

/ / change
document.documentElement.style.setProperty('--color'.'yellow');
var color = root.getPropertyValue('--color').trim();
console.log(color);  // '100px'

/ / delete
document.documentElement.style.removeProperty('--color');
var color = root.getPropertyValue('--color').trim();
console.log(color); // '70px'
Copy the code

Comparison with the preprocessor (SASS,less)

1. CSS variables:

Dynamic, can be changed at run time can be easily read from JS inheritable, composable, scopedCopy the code

2. Preprocessor:

Preprocessor variables are not dynamic and cannot be changed at run time. Preprocessor variables are not scoped and cannot interact with JSCopy the code

6. Common scenarios

Color variables are used for style uniformity

Consistent component properties (layout, positioning, etc.)

Avoid code redundancy (responsive layout, brake animation)