Vue如何使用CSS自定义变量

在 css 自定义变量的功能以及出来许久了，但实际开发中大家使用并不多。归其原因是因为 less、sass 等预处理器已经拥有定义变量的功能，以及Vue、react很方便设置 style 样式，大家可能觉得使用 css 定义变量不方便且没必要。实则不然举个最直观的栗子：“如何使用 vue 设置伪类伪元素的样式”。这是个世纪难题，大部分人可能会通过修改类名的方式解决，可如果要修改的样式多，或者我想通过不同的数据渲染不同的样式，那该怎么办呢？今天我就来直接解决这个问题。 先来了解什么是 css 自定义变量。 简单使用：

<style>
div {
    --bg-color : pink; //定义变量
    color : var( --bg-color ) // 通过var函数使用变量
}
</style>
<div>hello</div>

你将会得到一个粉色的hello。在父级定义的变量也可以让子级及其伪类伪元素使用。

<style>
div {
    --bg-color : pink; //定义变量
    color : var( --bg-color ); // 通过var函数使用变量
}
div:hover {
    background-color : var( --bg-color );
}
div span {
    background-color : var( --bg-color );
}
</style>
<div>hello <span>world</span> </div>

var 函数还可以设置一个默认值，当查找不到自定义变量时，你还可以设置一个默认值。

<style>
div {
    color : var( --bg-color, pink ); // 第二个参数为默认值
    background-color : var( --bg-color ,--color,--a,red );// 你甚至可以设置多个变量，它从左到右依次查找
}
</style>
<div>hello</div>

到此为止 css 自定义变量就介绍的完了。接下来看看它在 vue 中的使用。你可以在标签的 style 属性里面设置其变量的值。

<template>
	<div class="box" @click="changeColor" :style="{'--a' : a}">hello</div>
</template>
export default {
  data(){
    return {
      a : 'blue',
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</script>
<style>
  .box {
      color : var(--a);
  }
  .box:hover {
    background-color : var(--a);
  }
</style>

点击 div 它的字体颜色以及其 hover 时的背景颜色将会直接改变。在此时你会发现通过自定义 css 变量，可以很方便的修改其样式以及可以直接修改其伪类的属性。由于子元素可以共享父元素的自定义变量，你可以直接在子组件中直接使用父自己的变量。

// 父组件
<template>
	<div class="box"  :style="{'--a' : a}">hello <Child></Child></div>
</template>
export default {
  components : {
      Child
  },
  data(){
    return {
      a : 'blue',
    }
  }
}
</script>

// 子组件 Child
<template>
  <span>world</span>
</template>

<style lang="less">
  span {
      color : var(--color);
  }
</style>

试验一下效果非常的 amazing ,这样我们可以在父组件修改状态来改变子组件的样式，绕过了子父组件传值。注意：子组件必须要在变量能作用到的范围类挂载才行。

上述栗子中可以看出，子定义变量的方便之处。为来跟为方便的使用你可以通过 vue 自定义指令的方式设置变量。

   // vue3 自定义指令。
      function change(el,binding){
        for(let [key,value] of Object.entries(binding.value)){
            el.style.setProperty('--'+key, value);
        }
    }
  app.directive(css, {
        mounted(el,binding){
            change(el,binding)
        }
        updated(el, binding) {
            change(el,binding)
        }

    })

注意修改css变量使用 el.style['--color'] = 'red' 是无效的，必须得用 style.setProperty api设置。注册好指令后我们可以。

<template>
	<div v-css="{a,b}" class="box" @click="changeColor"></div>
</template>
export default {
  data(){
    return {
      a : 'blue',
      b : 'pink'
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'pink' ? "yellow" : "pink"
    }
  }
}
</script>
<style>
  .box {
    width : 100px;
    height : 100px;
    background-color : var(--a);
  }
  .box:hover {
    background-color : var(--b);
  }
</style>

极大的方便了vue 对于 style 样式的操作。

我在此基础上进行了一些优化及扩展，开源了一个工具，已发布在 npm 上。地址www.npmjs.com/package/vue… 。欢迎大家多多下载体验，喜欢也可以 star 哦。

以上就是Vue如何使用CSS自定义变量的详细内容，更多关于Vue 使用CSS自定义变量的资料请关注我们其它相关文章！