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

一篇文章带你学会CSS变量

本文将会介绍在CSS中使用变量的方法，包括变量定义、应用、子元素中使用变量以及JavaScript与CSS变量的交互。读完此文后，您将会完整地掌握CSS变量的使用。

1. 变量定义

在CSS中使用变量需要使用var关键字来定义一个变量，其格式如下：

:root { 
  --variable-name: value; 
}

这里使用了:root选择器，表示变量作用于整个文档，也可以针对某个选择器作为作用域：

.my-class { 
  --variable-name: value; 
}

2. 变量应用

使用var关键字调用变量，格式为：

selector {
  property: var(--variable-name);
}

例如：

body {
  font-size: var(--main-font-size);
  background-color: var(--main-bg-color);
}

3. 子元素中使用变量

子元素中同样可以使用父元素中定义的变量。例如：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  --main-color: red;
}

.child {
  color: var(--main-color);
}

4. JavaScript 与 CSS 变量交互

JavaScript可以用来修改CSS变量的值，示例如下：

<button onclick="changeColor()">Change Color</button>

:root {
  --primary-color: blue;
}

body {
  background-color: var(--primary-color);
}

function changeColor() {
  document.documentElement.style.setProperty('--primary-color', 'red');
}

在点击“Change Color”按钮时，背景颜色将会切换为红色。

另外，您也可以在JavaScript中获取CSS变量的值：

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');

以上是关于CSS变量完整的使用攻略。

示例1：

假如要定义三个变量，一个是主色调，一个是次要色调，一个是字体大小：

:root {
  --theme-color: blue;
  --secondary-color: gray;
  --font-size: 16px;
}

h1 {
  color: var(--theme-color);
  font-size: var(--font-size);
}

p {
  color: var(--secondary-color);
  font-size: var(--font-size);
}

示例2：

当鼠标悬停在某个元素上时，需要将字体颜色变为主色调。这个可以通过JavaScript实现：

<div id="box">
  <p>Some text here</p>
</div>

<script>
  const box = document.getElementById('box');
  const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-color');

  box.addEventListener('mouseover', () => {
    box.style.color = themeColor;
  });

  box.addEventListener('mouseleave', () => {
    box.style.color = '';
  });
</script>

在这个示例中，监听了鼠标悬停事件，并在事件发生时使用主色调改变字体颜色，鼠标移开时恢复字体颜色。