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']
        }
      },
    },
}

在vue的style中應用js變數

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>

轉 ： https://lequ7.com/guan-yu-cssvue-zhong-shi-yong-css-bian-liang.html