Css中使用Vue的变量

应用场景:(Vue一键换肤 – 修改 tagsView 动态选中样式)
1.css中如何用变量
声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

<span
   v-for="tag in visitedViews"
   :key="tag.path"
    class="tags-view-item" //默认样式
    :style="spanStyle" // 根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
    :class="isActive(tag) ? 'active' : ''"
 >
   {{ tag.title }}
</span>

export default {
  data() {
    return {
      spanStyle: {
        "--color": this.$store.state.settings.theme //默认值
      }
  };
  watch: {
  	//侦听store里某个属性的变化
    "$store.state.settings.theme": function(val) {
      this.spanStyle["--color"] = val;
  },
},
<style>
    .tags-view-item {
     //...
      &.active {
        background-color: var(--color);
        color: #fff;
        border-color: var(--color);
        &::before {
        }
      }
    }
  }
</style>

渐变按钮的示例

<span class="btn" 
	  @click="jumCZ"
	  :style="randomColor"//根据css中使用变量的方法,结合vue中动态行内样式进行伪元素动态属性设置
>
		充值
</span>
export default {
  data() {
    return {
      randomColor: {
        "--color": "#1a73e8" // 默认值
      }
    };
  },
  watch: {
   //侦听store里的settings模块下的state里的 theme 发生变化 产出随机颜色
    "$store.state.settings.theme": function(val) {
      const randomColor = Math.floor(Math.random() * 16777215).toString(16);
      this.randomColor["--color"] = "#" + randomColor;
    }
  },
}

<style>
    .btn {
      width: 70px;
      height: 20px;
      background-image: linear-gradient(
        to right,
        var(--color) 0%, //使用data中的变量
        #79cbca 51%,
        #77a1d3 100%
      );
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
      border-radius: 10px;
      display: block;
      cursor: pointer;
      font-size: 14px;
      line-height: 18px;
    }
    .btn:hover {
      background-position: right center; 
      color: #fff;
      text-decoration: none;
    }
</style>