实习技术总结（六）Vue新特性：在 css 中使用 JS 变量

Vue 用法更新后，大家都把关注点放在了Composition API 上，没有注意到这些不起眼的细节，但就是这些边边角角却可以极大的提高我们的开发体验。最近的项目开发中需要动态为元素的 CSS 属性赋值。虽然原生 js 提供了document.getElementById(id).style.property方法来操作 DOM 的方法来改变样式，但在 Vue 开发中有更简单的实现方案去动态地调整样式。

最开始的幻想

有没有这么一种可能，要是在 data 里面定义的变量也能在 CSS 里面使用，像这样：

<template>
  <div>
    {{ color }}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
        color: 'red'
    }
  }
}
</script>
 
<style>
h1 {
  color: this.color;
}
</style>
 

当然，这种设想是不可能的， JS 和 CSS 隶属不同上下文，CSS 中不能使用 this。

以前的做法

那么才能在CSS中使用JS变量呢？那就只能用原生 JS 去操作 DOM 然后把变量塞进style里了，或者在模板里这样写：

<template>
  <div :style="{ color }">Vue</div>
</template>
 
<script>
export default {
  data () {
    return {
        color: 'red'
    }
  }
}
</script> 

CSS 变量

CSS变量，也称为CSS自定义属性。通过以--开头的自定义属性来设置变量名，存储一些特定值，在需要的地方使用 var() 来访问。

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

const color = 'red'; // 声明
console.log(color) // 使用

在 SASS 中：

$color: color; /* 声明 */
div { 
    color: $color; /* 使用 */
}
 

在 CSS 中就等同于：

--color: red; /* 声明 */
div {
  color: var(--color); /* 使用 */
}

调用时要带着前缀--，还需要用var()来把变量包裹起来。

示例

在 vue 项目中：

• html 属性中设置行内的 style 属性中定义 CSS 变量
• 赋值为 JS 变量
• 在 CSS 中使用行内定义好的 CSS 变量

<div class="container">
  <div
    v-if="sys === 'mac'"
    class="test" 
    :style="{'--width':width[0]}"
  />
  <div
    v-else
    class="test" 
    :style="{'--width':width[1]}"
  />
</div>

// js
data(){
  return {
    width: ['200px','300px'],
  }
}

.test {
  width: var(--width);
}

兼容性

从 Can I use 网站上可以看到，不兼容 IE，使用时需注意。