Can variables be defined in css?

Variables can be defined in css. The syntax for variable definition is "--variable name", and the variable names defined in css are case-sensitive; you can use the var() function to read variables, the syntax is "var(--variable name)", and you can also use the function's The second parameter represents the default value of the variable. If the variable does not exist, this default value will be used.

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

Can variables be defined in css?

Variables can be used in css.

When declaring a css variable, add two hyphens (--) in front of the variable name. Variable names are case-sensitive, --header-color and --Header-Color are two different variables.

var() function is used to read variables.

The var() function can also use a second parameter to represent the default value of the variable. If the variable does not exist, this default value will be used.

The second parameter does not handle internal commas or spaces, and is regarded as part of the parameter.

css example of using variables:

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

The above code defines 3 variables, :root makes it accessible to everyone

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

The above uses previously defined variables as attribute values .

(Learning video sharing: css video tutorial)

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