vue中css，scss，less，sass变量的使用

scss

vue2中scss使用js变量

<template>
    <div class="text" :style="cssVars">666</div>
</template>
<script>
    data() {
        return {
          color: '#000'
        }
    },
    computed: {
      cssVars() {
        return {
            '--color': this.color
        }
      }
    }
</script>
<style scoped lang="scss">
    .text{
        background: var(--color);
    }
</style>

 vue3中scss使用js变量

<script setup>
    const lineColor = '#000'
</script>
<style scoped lang="scss">
    .line{
        border-bottom: 1px solid v-bind(lineColor);
    }
</style>

一般用于组件封装，多个模块都用了此组件，样式却有细微差别时使用，或者js动态控制样式时使用 

scss使用变量

//global.scss
$primary-color: #EA5504;

//index.vue
<style scoped lang="scss">
    .text{
        color: $primary-color;
    }
</style>

css

css使用变量

//global.css
body{
	--primaryColor: #4CAF50;
}


//页面
<style scope lang="css">
.text{
    color: var(--primaryColor);
}
</style>

其他待完善...