What are variables in css

In CSS, variables refer to custom attributes, which have legal identifiers and legal values ​​and can be used anywhere. CSS variables have access to the DOM, which means developers can create variables with local or global scope, modify variables using JavaScript, and modify variables based on media queries.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS custom properties are also called CSS variables. Variables have legal identifiers and legal values ​​and can be used anywhere. Use variables through the var() function. For example: var(--example) will return the value corresponding to --example.

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

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

A great way to use CSS variables involves the colors of your design. You can put them in variables instead of copying and pasting the same colors over and over again.

Basic usage:

• Declare a local variable:

element {
  --main-bg-color: brown;
}

• Use a local variable:

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

• Declare a global CSS variable:

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

• Use a global CSS variable:

.demo{
   color: var(--global-color);
}

Supplement

• :root is a CSS pseudo-class, matching the root of the document tree element. For HTML, :root represents the element, which is the same as the html selector, except with higher precedence. So we usually write custom attributes in :root{}, and the elements in the html tag will inherit it.

• CSS custom properties can be cascaded: each custom property can appear multiple times, and the value of the variable will be calculated using the cascading algorithm and the custom property value.

• CSS variables do not support the !important declaration, please note that it is just a declaration.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are variables in css. For more information, please follow other related articles on the PHP Chinese website!