自定义变量

背景知识： CSS_variables (opens new window)，var() (opens new window)

CSS变量类似于我们在SCSS、LESS中定义的变量，但前者支持通过JS来控制变量的值，以--开头，(e.g. --main-color: #b4a078)，通过var(--main-color)来引用。var()函数接受两个参数（e.g. var(--main-color, gray)），第一个参数为自定义属性名，第二个参数用作缺省值。

以下示例演示了通过JS setProperty (opens new window) 方法改变CSS变量，从而控制元素甚至伪元素的样式~

请选择主题色：

<style scoped>
  .main {
    width: 100%;
    padding: 60px 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }
  .label {
    display: flex;
    align-items: center;
  }
  .variable-box {
    --bgc: #b4a078;
    width: 100%;
    height: 100px;
    margin-top: 29px;
    background: var(--bgc);
  }
</style>
<template>
  <div class="main">
    <div class="label">
      请选择主题色：
      <el-color-picker
        v-model="value"
      ></el-color-picker>
    </div>
    <div class="variable-box" ref="variable-box"></div>
  </div>
</template>
<script>
  const INITIAL_COLOR = '#b4a078';
  export default {
    data() {
      return {
        value: INITIAL_COLOR,
      }
    },
    watch: {
      value: function() {
        const color = this.value.length === 7 && this.value || INITIAL_COLOR;
        this.$refs['variable-box'].style.setProperty('--bgc', color);
      }
    }
  }
</script>

显示代码 复制代码 复制代码

如需设置特定的值，直接修改示例中INITIAL_COLOR的值即可，只支持支6位16进制的颜色格式。