单文件组件样式 RFC 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。

使用 SFC 样式

  • 声明响应式数据
  • 使用 v-bind 在我们的 CSS 中访问它们 
<template>
  <div>
    <div class="text">hello</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

更复杂的数据结构，假设我们有一个名为 font 的对象，并且其中有一个名为 weight 的属性。

<script>
export default {
  data() {
    return {
      color: 'red',
      font: {
        weight: 700
      }
    }
  }
}
</script>

<style>
  .text {
    color: v-bind(color);
    /* 用引号括起来 */
    font-weight: v-bind('font.weight');
  }
</style>

注意：我们必须用引号将我们的表达式括起来。

Vue 提供了内置的响应式系统，我们只需要修改响应式中的数据，便可以动态的修改页面中的外观。

<div>
  <div class="text">hello</div>
  <button @click="color = 'plum'">Make Plum</button>
</div>

Vue SFC 样式变量如何工作？

使用到了 CSS 变量，我们样式中的 v-bind 最终将被编译为使用 CSS var 语法和我们的新 CSS 变量。

注意：为避免继承问题，在父组件定义的 CSS 变量对其任何子组件均不可用。

使用前检查浏览器支持

如果您希望在生产环境中实现这一点，请确保检查浏览器对 CSS 变量的支持。

如果没有 CSS 变量，SFC 样式变量将无法工作，因此如果您的应用程序需要支持某些较旧的浏览器，这对您来说可能不是一个可行的选择。

以下是 CSS 变量支持情况：

css variables