一篇文章带你学会css变量(推荐!)

一篇文章带你学会 CSS 变量

本文将从什么是 CSS 变量开始，逐步介绍 CSS 变量的用法和相关技巧，帮助读者熟练使用 CSS 变量。

什么是 CSS 变量

CSS 变量，又称自定义属性，是一种 CSS 新增的功能，它可以在全局范围内定义一个值，并在后续的 CSS 中引用该值。采用变量的方式可以提高 CSS 的复用性，并且可以更方便地对样式进行全局调整。

定义 CSS 变量

定义一个 CSS 变量需要使用 -- 作为前缀，后接变量名和变量值：

:root {
  --main-color: #007bff;
}

以上代码定义了一个 --main-color 变量，它的值为 #007bff。

引用 CSS 变量

定义了 CSS 变量之后，我们可以在后续的 CSS 中引用这个变量：

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

以上代码使用了 var() 函数来引用变量 --main-color，这样就可以获取变量的值并应用到样式中。

动态改变 CSS 变量的值

CSS 变量的值可以动态改变，这可以借助 JavaScript 来实现，以下是一个示例：

HTML：

<div class="box">
  <button id="change-color-btn">Change Color</button>
</div>

CSS：

:root {
  --main-color: #007bff;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--main-color);
}

.box.new-color {
  --main-color: #e83e8c;
}

JavaScript：

var box = document.querySelector('.box')
var btn = document.querySelector('#change-color-btn')

btn.onclick = function() {
  box.classList.toggle('new-color')
}

以上代码为一个颜色变化的示例，点击按钮可以切换 .box 元素的背景颜色。通过为特定元素定义 CSS 变量，我们可以在 JavaScript 中动态修改其对应的值，从而实现更加灵活的样式变化。

CSS 变量的应用

CSS 变量可以发挥的作用更加广泛，以下是一些在实际项目中常用的应用场景：

1. 全局主题颜色的定义

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

.nav-link {
  color: var(--primary-color);
}

1. 方便的响应式样式定义

.container {
  width: calc(100% - var(--padding) * 2);
  padding: var(--padding);
}

@media (max-width: 768px) {
  :root {
    --padding: 10px;
  }
}

@media (min-width: 769px) {
  :root {
    --padding: 20px;
  }
}

如上，这里列举了两个实际应用 CSS 变量的场景。

总之，学会 CSS 变量会让你的样式代码更加简洁、方便和灵活。