CSS variables (custom properties) are defined at the beginning of --, such as --main-color: #333;, which can be referenced and modified dynamically in CSS, suitable for topic switching and style management. 1. Defining variables are usually in:root or specific elements, such as:root { --main-color: #333; }; 2. When using var(--variable name), such as color: var(--main-color); 3. You can set the default value to prevent errors, such as var(--main-color, #000); Common uses include: 1. Unified management of theme colors, and style changes by switching variables; 2. Avoid duplicate code, centrally managing colors, spacing and other values; 3. Dynamically update styles, and combine JavaScript to modify and change variables to achieve interactive effects; precautions include: scope affects the effective scope of the variable, and child elements can cover the parent variable; strings cannot be spliced, and the full value needs to be written directly; good compatibility, mainstream browsers support but are not suitable for IE.

Using CSS variables (custom properties) is actually quite convenient, especially when you are doing large projects or need to adjust the style frequently. It is not only used in preprocessors like ordinary variables, but is natively supported and more flexible to write.

What are CSS variables?

CSS variables, also called custom properties, are attributes defined by -- , such as --main-color: #333; They can be referenced throughout the CSS file and can be modified dynamically, making them ideal for topic switching and color management.

You usually define global variables in :root , or local variables in a specific element, so that only affects that part. For example:

 :root {
  --main-color: #333;
}

.header {
  --main-color: #f00;
}

How to use CSS variables?

The use method is very simple, which is to use the form of var(--變量名) . For example, if you want to set the text color as the main color, you can write it like this:

 p {
  color: var(--main-color);
}

There are a few small details to pay attention to:

• If the variable is not defined, the browser will ignore this value, which may cause a style exception.
• You can add a default value to var() , such as var(--main-color, #000) so that if the variable does not exist, it can still be guaranteed.

Common uses and suggestions

1. Unified management of theme colors

Many projects will have a set of main tones, and it is particularly appropriate to use variables to centrally manage them. For example, if you have a dark theme and a light theme, you only need to change a few variables to switch the overall style.

 :root {
  --bg-color: #fff;
  --text-color: #333;
}

.dark-theme {
  --bg-color: #111;
  --text-color: #eee;
}

2. Avoid duplicate code

If you have many duplicate colors and spacing values ??in your CSS, using variables can reduce redundancy. For example, padding or rounded borders of buttons:

 :root {
  --btn-padding: 12px 24px;
  --btn-radius: 8px;
}

3. Dynamic update style scene

JavaScript can be used to dynamically modify and change the meter values ??to achieve some interactive effects. For example, click the button to change the background color:

 document.documentElement.style.setProperty('--bg-color', '#ff0');

Notes and FAQs

• The scope needs to be clarified : where the variable is defined under which element it takes effect. :root is global, and child elements can override parent variables.
• You cannot splice strings : For example, if you write a font size of --font-size: 16; , and then want to use font-size: var(--font-size)px; this is not possible, you have to write it directly as --font-size: 16px; .
• Compatibility is basically fine : mainstream modern browsers support it, but if you are still supporting IE, this set will not be applicable.

Basically that's it. Master the definition, call and scope of variables, and organize the variable structure based on actual needs, you will find it easier to write CSS.

The above is the detailed content of Using CSS variables (custom properties). For more information, please follow other related articles on the PHP Chinese website!