Shulou(Shulou.com)06/03 Report--

This article will explain in detail the sample analysis of CSS variables for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

As Web applications get bigger, CSS becomes bigger, more verbose, and messy. Using CSS variables in a good context provides us with a mechanism to reuse and easily change recurring CSS properties.

Before pure CSS supported variables, we had preprocessors like Less and Sass. But they need to be compiled before they are used, so (sometimes) add an extra layer of complexity.

How to define and use CSS variables (also known as custom properties)

To declare a simple JS variable, it's simple, as follows:

Let myColor = "green"

To declare a CSS variable, you must add two lines before the name of the variable.

Body {--english-green-color: # 1B4D3E;}

Now, to use the value of the CSS variable, we can use var (...). Function.

.my-green-component {background-color: var (--english-green-color);}

The easiest way to manage CSS variables is to declare them in the: root pseudo class. Since CSS variables follow the same rules as other CSS definitions, placing them in: root ensures that all selectors can access them.

: root {--english-green-color: # 1B4D3E;} browser support for CSS variables

Browser support for CSS variables is not bad at all. If you look at Can I Use CSS Variables, you will find that all major browsers support the CSS variable. Whether it's on a mobile device or PC.

Now, let's take a look at what these CSS variables actually do.

Example 1-manage colors

One of the best choices for using CSS variables is the color of the design. Instead of copying and pasting the same colors over and over again, we just put them in variables.

If a damned product wants us to update a specific green shadow or set all buttons to red instead of blue, simply change the value of the CSS variable. We don't need to search for and replace all the colors that appear.

Try it: https://codesandbox.io/s/8kkyl4mlm9?from-embed

Example 2-remove duplicate code

Usually we need to build different variants of some components. The same basic style, but with slightly different functions. Let's give an example of using a case with different color buttons.

.btn {border: 2px solid black; / / more props here} .btn: hover {background: black; / / more props here} .btn.red {border-color: red} .btn.red: hover {background: red}

Use them like this:

HelloHello

However, this will add some code duplication. In the .red class, we must set both the border color and the background to red. In case you need to change the color one day, it will be very troublesome. You need to change it one by one. This problem can be easily solved through the CSS variable.

.btn {border: 2px solid var (--color, black);} .btn:hover {background: var (--color, black);} .btn.red {--color: red}

Try it: https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

Example 3-make some properties easy to read

If we want to create shortcuts for more complex attribute values, then the CSS variable is very useful so that we don't have to remember it.

CSS attributes, such as box-shadow, transform, and font, or other CSS rules with multiple parameters, are a good example.

We can put the property in a variable so that we can reuse it in a format that is easier to read.

/ / main code: root {--tiny-shadow: 4px 4px 2px 0 rgba (0,0,0,0.8);-- animate-right: translateX (20px);} li {box-shadow: var (--tiny-shadow);} li:hover {transform: var (--animate-right);}

Try it: https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

Example 4-cascading variables

Standard cascading rules also apply to CSS variables. If a custom property is declared more than once, the lowest definition in the css file overrides the definition above it.

The following example shows how easy it is to manipulate properties dynamically on user actions while keeping the code clear and concise.

/ / main code. Orange-container {--main-text: 18px;}. Orange-container:hover {--main-text: 22px;}. Red-container:hover {--main-text: 26px;}. Title {font-size: var (--title-text);}. Content {font-size: var (--main-text);}. Container:hover {--main-text: 18px;}

Try it: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

Example 5-theme switching and CSS variable

One of the great advantages of CSS variables is their responsiveness. Once we update them, any properties with the value of the CSS variable are also updated. Therefore, you can create a topic switcher mechanism with just a few lines of Javascript and clever use of the CSS variable.

Try it: https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

Expansion

Like almost everything in CSS, variables are very easy to use. Here are some tips that are not included in the example, but are still useful in some cases:

Pay attention to uppercase, CSS variables are case sensitive

: root {--color: blue;-- COLOR: red;} / *-- color and-- COLOR are two different variables*/

When we use the var () function, we can also pass in a second parameter. If the custom attribute cannot be found, this value is used:

Width: var (--custom-width, 33%)

You can use the CSS variable directly with HTML

Body {max-width: var (--size)}

You can use the CSS variable in other CSS variables:

-- base-red-color: # f00Mattel Muhammad: linear-gradient (to top, var (--base-red-color), # 222)

The CSS variable can be used as a condition through media queries. For example, the following code changes the value of padding based on the screen size:

: root {--padding: 15px} @ media screen and (min-width: 750px) {--padding: 30px}

The CSS variable can also be used in the calc () function.

-- text-input-width: 5000pxbot maxmuri width: calc (var (--text-input-width) / 2)

The CSS variable is not a panacea. They won't solve all the problems we encounter in the CSS world. However, it can make our code more readable and maintainable.

Moreover, they greatly improve the ease of making changes across large documents. Just set all the constants in a single file, and we don't have to skip thousands of lines of code when we just want to make changes to the variables.

This is the end of this article on "sample Analysis of CSS variables". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.