CSS 自定义变量：让你的 Vue 项目更具可维护性

2023-10-23 08:53:52

前言

在 CSS 中，变量可以存储一个值，并在其他地方引用它。这使得维护和更新样式变得更加容易。例如，如果你想更改网站的主题颜色，你只需更改变量的值，而不需要搜索和修改所有使用该颜色的地方。

CSS 自定义变量

CSS 自定义变量使用 -- 前缀来声明。例如：

:root {
  --primary-color: #ff0000;
}

这将创建一个名为 --primary-color 的变量，并将其值设置为 #ff0000。

要使用变量，你可以在 CSS 选择器中使用它。例如：

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

这将使 .button 元素的文本颜色设置为 --primary-color 的值，即 #ff0000。

在 Vue 中使用 CSS 自定义变量

在 Vue 中，你可以使用 v-bind 指令来将 CSS 自定义变量绑定到组件的样式。例如：

<template>
  <div :style="{ color: primaryColor }">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '--primary-color',
      message: 'Hello World!'
    }
  }
}
</script>

这将创建一个带有 primary-color 变量的 <div> 元素。变量的值将从组件的 primaryColor 数据属性中获取。

你也可以使用 v-bind 指令来将 CSS 自定义变量绑定到组件的类。例如：

<template>
  <div :class="{ active: isActive }">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      message: 'Hello World!'
    }
  }
}
</script>