css变量以及在vue中使用(个人笔记)

本文参考：Vue超好玩的新特性：在CSS中使用JS变量

以前做项目的时候经常会这么想：要是我在data里面定义的变量也能在CSS里面用那该多好啊！

<template>
  <h1>{{ color }}</h1>
</template>

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

<style>
h1 {
  color: this.color;
}
</style>

当然，想想也知道不可能，JS和CSS隶属不同上下文，CSS哪来的this呢？

什么是CSS变量

在JS里(不止JS，所有语言都差不多)，变量有如下几个特性：

• 声明
• 使用
• 作用域

为了方便理解，咱们通过用JS的方式来类比：

var color = 'red';

在CSS中等同于：

--color: red; // CSS的符号就是两个减号--

使用

CSS在使用变量的时候用到了一个函数叫var()：

CSS:

h1 {
    color: var(--color);
}

作用域

body {
    --color: red;
}

h1 {
    color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}

div {
    --color: blue;
    color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}

也就是说，变量的作用域就是它所在的选择器的有效范围。

在vue中的变量

那么怎样才能在vue3的<style>中使用<script>里声明的变量呢？

首先我们先创建个支持vue3的vite项目：

npm init vite-app vars

然后进入到该文件夹安装依赖：

cd vars

npm i

然后创建一个组件，组件型式长这样：

<template>
  <h1>{{ color }}</h1>
</template>

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

<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

首先要在<style>标签中写个vars="{}"，再在大括号里写上你在data中声明过的值。
多个变量之间使用逗号进行分隔：

<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>
<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

而且这个变量是响应式的，动态改变<script>标签中的this.color值会引起视图的变化。