[CSS] How do I interpret CSS variables well

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

In fact, talk about how good variables are, and everyone in our industry knows. Just say JS, without variables, the code will be messed up. Both the readability and the length of the code make programmers a one-time job and cannot be reused.

So the effect of CSS variables is very big (forgive programmers who don't have much ink). Although CSS logic is not that complicated, it greatly enhances the readability of the code. As a style officer, CSS has such a good code style. Doesn't it match its style?

CSS variables can access the DOM, which means you can create variables with local or global scope, use JavaScript to modify variables, and modify variables based on media queries.

For some fonts or colors, using variables is the best choice.

var() function

The var() function is used to insert the value of a CSS variable.

grammar

var(name, value)

value	describe
name	Required. Variable name (beginning with two dashes).
value	Optional. The fallback value (used when the variable is not found).

Global use

If it is used globally, it is declared in the :root selector.

The :root selector matches the root element of the document.

:root {
  --blue: #1e90ff;
}

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

Partial use

Local use is a variable with a local scope, which only needs to be declared in the selector that uses it.

element {
  --main-bg-color: brown;
  background-color: var(--main-bg-color);
}

Variable type

String

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

 --main:"hello";
 --text: var(--main)"world ! ";

Numerical value

If the value of the variable is a numeric value, it cannot be used directly with the numeric unit when using it

.text {
  --main: 30;
  /* 无效 */
  margin-top: var(--main)px;
}

When you need to use it, you need to pass the calc() function

.text {
  --main: 30;
  margin-top: calc(var(--main) * 1px);
}

If you bring the unit when assigning the value, write it directly without using the string form, otherwise it will be invalid.

Responsive layout

CSS is dynamic, and any changes to the page will lead to changes in the rules adopted.

Declare variables in the media command of the responsive layout, which allows different screens to have different variable values

body {
  --primary: #DE783F;
  --success: #E7ED2F;
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EF29;
    --success: #FF753F;
  }
}

@media screen and (min-width: 1440px) {
  body {
    --primary:  #F745F2;
    --success: #E7F53F;
  }
}

span {
  color: var(--primary);
  text-decoration-color: var(--success);
}

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Summarize

CSS can reduce the complexity of work, make it easier to modify and add, and change one place can be applied to other places.
The variable itself contains semantic information, making the code easier to read (easier to understand). main-theme-color is easier to understand and easy to change than #e3ff34 which simply appears in the document. The same color appears in different files to define the description.

thanks

Universal network
And the hardworking self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[CSS] How do I interpret CSS variables well