Usage of variables in CSS

Usage of variables in CSS

The variables in CSS give us many advantages: convenience, code reuse, more reliable code library, and improved error prevention capabilities.

Example

:root {  --base-font-size: 16px;  --link-color: #6495ed;}p {  font-size: var( --base-font-size );}a {  font-size: var( --base-font-size );  color: var( --link-color );}

Basic

When using CSS variables, you should understand three main components:

Custom Attributes var()Function :rootPseudo-class Custom Attributes

You already know some standard CSS attributes, suchcolor,margin,widthAndfont-size.
The following example usescolorAttribute:

body {  color: #000000; /* The color CSS property */}

Custom AttributesIt only means that we (the person who created the CSS file) define the attribute name.
To customize an attribute name, we need to use--As the prefix.
If you want to create a blacktext-colorYou can do this:

:root {  --text-color: #000000; /* A custom property named text-color */}

Var () function

To apply custom attributes, you must useVar ()Function, otherwise the browser does not know what they represent.
If you wantp,h1Andh2Use--text-color.Var ()Function:

:root {  --text-color: #000000;}p {  color: var( --text-color );  font-size: 16px;}h1 {  color: var( --text-color );  font-size: 42px;}h2 {  color: var( --text-color );  font-size: 36px;}

It is equivalent:

p {  color: #000000;  font-size: 16px;}h1 {  color: #000000;  font-size: 42px;}h2 {  color: #000000;  font-size: 36px;}

: Root pseudo class

We need a place to place custom attributes. Although custom attributes can be specified in any style rule, it is not a good idea to define attributes everywhere, which is a challenge to the maintainability and readability of CSS.
:rootThe pseudo class represents the root element of the HTML document, which is a good place to place custom attributes, because we can overwrite custom attribute values through other more specific selectors.

Benefits and maintainability of CSS Variables

In a Web development project, we often reuse a specific CSS property value:

h1 {  margin-bottom: 20px;  font-size: 42px;  line-height: 120%;  color: gray;}p {  margin-bottom: 20px;  font-size: 18px;  line-height: 120%;  color: gray;}img {  margin-bottom: 20px;  border: 1px solid gray;}.callout {  margin-bottom: 20px;  border: 3px solid gray;  border-radius: 5px;}

When some attribute values need to be changed, the problem is exposed.
If we manually change the attribute value, especially when the CSS file is large, it will not only take a lot of time, but may also make some mistakes. Similarly, if we perform a batch search and replacement operation, other style rules may be accidentally affected.
We can use CSS variables to override:

:root {  --base-bottom-margin: 20px;  --base-line-height:   120%;  --text-color:         gray;}h1 {  margin-bottom: var( --base-bottom-margin );  font-size: 42px;  line-height: var( --base-line-height );  color: var( --text-color );}p {  margin-bottom: var( --base-bottom-margin );  font-size: 18px;  line-height: var( --base-line-height );  color: var( --text-color );}img {  margin-bottom: var( --base-bottom-margin );  border: 1px solid gray;}.callout {  margin-bottom: var( --base-bottom-margin );  border: 1px solid gray;  border-radius: 5px;  color: var( --text-color );}

Assume that the text color is too bright, making the text hard to read and changing the text color. In this case, we only need to update the CSS rule for one line:

--text-color: black;

Improve CSS readability

Custom Attributes make the style sheet more readable and make the CSS attribute Declaration more semantic.
Declare this statement

background-color: yellow;font-size: 18px;

Compare it with the following statement

background-color: var( --highlight-color );font-size: var( --base-font-size );

ImageyellowAnd18pxAttribute values of the first type do not give us any useful context information, but when we read--base-font-sizeAnd--highlight-colorWhen the same attribute name is used, even in other people's code, we can immediately know what the attribute value is doing.

Case sensitivity

Custom Attributes are case sensitive (different from common CSS rules)

:root {  --main-bg-color: green;  --MAIN-BG-COLOR: RED;}.box {  background-color: var( --main-bg-color ); /* green background */}.circle {  BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */  border-radius: 9999em;}.box,.circle {  height: 100px;  width: 100px;  margin-top: 25px;  box-sizing: padding-box;  padding-top: 40px;  text-align: center;}

Resolution of custom attribute values

When a custom attribute is declared repeatedly, the value assignment follows the common CSS cascade and inheritance rules. For example:
HTML

Link

CSS

:root {  --highlight-color: yellow;}body {  --highlight-color: green;}.container {  --highlight-color: red;}a {  color: var( --highlight-color );}

When removed.containerThe link color value isgreen.

Rollback Value

When usingvar()When a function is used, you can assign a property value for rollback, which is used as an additional parameter and the first parameter.,. See the following example:
HTML

A Box

CSS

div {  --container-bg-color: black;}.box {  width: 100px;  height: 100px;  padding-top: 40px;  box-sizing: padding-box;  background-color: var( --container-bf-color, red );  color: white;  text-align: center;}

Becausevar()A rollback value parameter is passed, sodivIs rendered in red at the top of the background color.

Invalid value

Beware of assigning Error Type values to CSS attributes.
In the following example--small-buttonIs assigned a length unit, which is used in.small-buttonThe style is invalid.colorThe property type value of is incorrect)

:root {  --small-button: 200px;}.small-button { color: var(--small-button);}

A good way to avoid this is to come up with a descriptive custom property name. For example, name the preceding custom attribute--small-button-width

Support for CSS variables by browsers

CSS variables are easy to use, but the browser does not support them well: