手把手带你通过5个例子来熟悉CSS变量！

通过5个例子来熟悉CSS变量

CSS变量是一种在CSS中定义并复用值的方法。与JavaScript变量类似，CSS变量也有其范围和作用域。在本文中，我们将通过5个例子来演示如何使用CSS变量。

例子1：定义和使用CSS变量

在CSS中，变量以--开头，后跟变量名，然后是变量的值。可以通过var()函数来使用CSS变量。下面是一个例子：

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

在这个例子中，我们在:root伪类中定义了一个名为--primary-color的CSS变量，它的值为#007bff。然后在.button类中使用了这个变量来设置按钮的背景色。

值得注意的是，CSS变量是可以被复写的。假设我们在.button类中再次定义--primary-color变量，那么它将覆盖:root中定义的同名变量，这也是CSS变量的一大特性。

例子2：使用CSS变量进行运算

CSS变量不仅可以是固定的值，还可以进行运算。下面是一个例子：

:root {
  --button-width: 100px;
  --button-height: 50px;
}
.button {
  width: calc(var(--button-width) * 2);
  height: calc(var(--button-height) + 10px);
}

在这个例子中，我们定义了两个CSS变量，--button-width和--button-height，并在.button类中使用了这些变量进行计算来设置按钮的宽度和高度。

例子3：使用CSS变量进行响应式设计

使用CSS变量可以方便实现响应式设计。下面是一个例子：

:root {
  --main-font-size: 16px;
}
@media screen and (min-width: 768px) {
  :root {
    --main-font-size: 20px;
  }
}
body {
  font-size: var(--main-font-size);
}

在这个例子中，我们定义了一个CSS变量--main-font-size，并在媒体查询中重新定义了这个变量的值，以实现在不同分辨率下不同的字体大小。

例子4：使用CSS变量来继承值

CSS变量可以继承父元素的值，这在处理复杂的CSS嵌套结构时非常有用。下面是一个例子：

.container {
  --primary-color: #007bff;
}
.container .button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

在这个例子中，我们在.container类中定义了--primary-color变量。然后，在.container .button类中使用var()函数来继承这个变量的值来设置按钮的背景色。

例子5：使用JavaScript在运行时更改CSS变量

最后一个例子是在JavaScript中更改CSS变量的值。下面是一个例子：

:root {
  --primary-color: #007bff;
}
.button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

const button = document.querySelector('.button');
button.style.setProperty('--primary-color', '#dc3545');

在这个例子中，我们在CSS中定义了一个--primary-color变量，并在.button类中使用了这个变量来设置按钮的背景色。然后，通过JavaScript来获取按钮元素，并使用setProperty()方法来更改--primary-color变量的值，从而更改按钮的背景色。

结论：CSS变量是一种强大的工具，可以使CSS更加灵活、易于维护和扩展。我们通过5个例子演示了如何使用CSS变量，包括定义和使用CSS变量、使用CSS变量进行运算、使用CSS变量实现响应式设计、使用CSS变量继承值以及使用JavaScript在运行时更改CSS变量的值。希望这些例子可以帮助你更好地理解和应用CSS变量。