关于css: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>