vue3中 css的变量

现在vue3定义全局变量不使用less和sass也可以做的看  这就是vue3 的新特性，下面我们来学习一下

-- 方式创建变量

在全局引入初始化css时，用 --name 定义变量

body {
    --colorRed: rgb(250, 35, 35);
    --colorblue: rgb(35, 56, 250);
    --colorYellow: rgb(229, 255, 0);
    --colorOrange: rgb(255, 136, 0);
    --box: 100px;
}

在vue里使用

<template>
    <div class="dong">
        <h3 class="h3">--color的使用</h3>
        <div class="box  box1">
            --colorRed
        </div>
        <div class="box box2">
            --colorblue
        </div>
        <div class="box box3">
            --colorYellow:
        </div>
        <div class="box box4">
            --colorOrange
        </div>
    </div> 
</template>

<script setup>
</script>
<style lang="less" scoped>
.dong{
    width: 100%;
    height: 100%;
    color: #fff;
    background: #fff;
    font-size: 18px;
    .box{
        width: var(--box);
        height:  var(--box);
    }
    .box1{
        background: var(--colorRed);
    }
    .box2{
        background: var(--colorblue);
    }
    .box3{
        background: var(--colorYellow);
    }
    .box4{
        background: var(--colorOrange);
    }
    .h3{
        font-size: 20px;
        color: #000;
    }
}
</style>

效果

 注意： 如果有局部变量，那么局部变量优先级比body的高

动态样式

使用v-bind绑定变量， 注意使用reactive需要加引号， 同时也可以修改变量

<template>
    <div class="dong">
        <h3 class="h3">--color的使用</h3>
        <div class="box  box1">
        </div>
        <div class="box box2">
        </div>
        <div class="box box3">
        </div>
        <div class="box box4" @click="setColor">
        </div>
    </div> 
</template>

<script setup>
import {ref,reactive} from "vue"
let color1 = ref("red");
let colorobj = reactive({
    color2: "#04ffd5",
    color3: "rgba(158, 0, 240, 1)"
})

let color4 = ref("red");
const setColor = ()=>{
    color4.value = "#04ffd5"
}
</script>
<style lang="less" scoped>
.dong{
    width: 100%;
    height: 100%;
    color: #fff;
    background: #fff;
    font-size: 18px;
    .box{
        width: 100px;
        height: 100px;
    }
    .box1{
        background: v-bind(color1);
    }
    .box2{
        background: v-bind('colorobj.color2');
    }
    .box3{
        background: v-bind('colorobj.color3');
    }
    .box4{
        background: v-bind(color4);
    }
    
    .h3{
        font-size: 20px;
        color: #000;
    }
}
</style>

全局样式:global()

可以直接在组件里面写，全局生效， 一般不建议用

<style lang="scss" scoped>

// div .class #id
:global(div) {
  background-color: #e3e3e3e8;

}

</style>