vue 中使用 css 变量

Less Scss 预处理语言

通常我们会使用less等预处理语言来设定全局的颜色管理

color.less

// DARK-THEME

@base-bg: #001f3b;
// @base-bg: #042d6b;
@light-font-color: rgb(219, 219, 219);
@shadow-color: rgb(59, 54, 54);
@menu-active-color: rgb(193, 194, 196);
@table-head-color: rgba(69, 107, 150, 0.808);
@btn-hover-color: #0f2035;

@primary-color: #39bfed;
@primary-color-opacity:  #39c0ed67;
@bg-content: rgba(27, 159, 225, 0.205);
@bg-content-3: rgba(27, 159, 225, 0.116);

有的时候某些场景我们需要在JS中去使用这些颜色
比如我们在使用echarts的时候，这时候我们可以使用 :export 来导出变量

index.less

// DARK-THEME

@base-bg: #001f3b;
// @base-bg: #042d6b;
@light-font-color: rgb(219, 219, 219);
@shadow-color: rgb(59, 54, 54);
@menu-active-color: rgb(193, 194, 196);
@table-head-color: rgba(69, 107, 150, 0.808);
@btn-hover-color: #0f2035;

@primary-color: #39bfed;
@primary-color-opacity:  #39c0ed67;
@bg-content: rgba(27, 159, 225, 0.205);
@bg-content-3: rgba(27, 159, 225, 0.116);

:export {
  primary: @primary-color;
  primaryOpacity: @primary-color-opacity;
}

component.vue

import colors from '../common/color.less'
const chartOption = {
    xAxis: {
      type: 'value',
      splitLine: 'none',
      axisLine: {
        lineStyle: {
          color: colors.primary
        }
      },
    },
    yAxis: {
      type: 'category',
      splitLine: 'none',
      axisLine: {
        lineStyle: {
          color: colors['primary']
        }
      },
    },
}

在vue3的style中使用变量

vue2使用变量方式为传入vars

export default {
    data () {
        return {
            red: 'red'
        }
    }
}
<style lang="less" scoped vars="{red}">
p {
    color: var(--red)
}
</style>

vue3中我们可以子style中直接使用v-bind(attr)来使用变量

<template>
  <p :class="$style.red">
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script setup>
const color = 'green'
</script>


<style scoped module>
.red {
  color: v-bind(color);
}
</style>