Let's take you step by step through 5 examples to get familiar with CSS variables!

Are you familiar with CSS variables? If you’re not familiar with it, don’t worry! The following article will introduce you to CSS variables and use 5 examples to familiarize you with CSS variables. I hope it will be helpful to you!

As web applications get larger, CSS becomes larger, more verbose, and cluttered. 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 use, thus (sometimes) adding an extra layer of complexity.

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

To declare a simple JS variable, it is very simple, as follows:

let myColor = "green";

To declare For a CSS variable, two dashes must be added before the variable's name.

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

Now, in order to use the value of a CSS variable, we can use the 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. Given that CSS variables follow the same rules as other CSS definitions, placing them in :root will ensure that all selectors can access these variables.

: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 see that all major browsers support CSS variables. Whether on mobile or PC.

Now, let’s see what these CSS variables actually do.

Example 1 - Managing Color

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

If there's a damn product that wants us to update a specific shade of green or make all buttons red instead of blue, we can just change the value of that CSS variable. We don't need to search and replace all occurrences of that color.

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

Example 2-Delete Duplicate Code

Often we need to build different variations of some component. Same basic style, just slightly different functionality. Let's use an example with buttons of different colors.

.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:

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

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

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

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

Example 3 - Making certain properties easy to read

CSS variables are useful if we want to create shortcuts for more complex property values ​​so that we don't have to remember it.

CSS properties such as box-shadow, transform, and font or other CSS rules with multiple parameters are good examples.

We can put the property in a variable so we can reuse it in a more readable format.

// 主要代码
: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 multiple times, the lowest definition in the CSS file will override the definition above it.

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

// 主要代码
.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 yourself: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

Example 5 - Theme Switching with CSS Variables

One of the great advantages of CSS variables is their responsive nature. Once we update them, any properties with CSS variable values ​​will also be updated. So, with just a few lines of Javascript and clever use of CSS variables, you can create a theme switcher mechanism.

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

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

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

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

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

可以将CSS变量直接用于HTML

<!--HTML-->
<html style="--size: 600px">

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

可以在其他CSS变量中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

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

在calc()函数中也可以使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。

原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

作者：Daniel

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Let's take you step by step through 5 examples to get familiar with CSS variables!. For more information, please follow other related articles on the PHP Chinese website!