css变量和深度选择器怎么用

css变量名一般--开头 全局变量:

// css
// 定义
:root{
    --变量名: 变量值
}

// 使用
.box {
    color: var(--变量名)
}

局部变量:
写在选择器里

.box {
    --变量名: 变量值
    color: var(--变量名)
}

如果要对组件里的某一小块部分做修改,可以用深度选择器进行样式穿透 不同的预处理器的深度选择器语法不同 scss: ::v-deep() less: /deep/ css: >>> 这些深度选择器都需要写在选择器前面

// 单个选择器
::v-deep() .box{
    color:red;
}
// 后代选择器
.box /deep/ .box1{
    color:pink;
}

在vue中使用

<template>
    <div class="a" :style="`--mycolor: ${myColor}`">你好</div>
</template>

<script setup>
import { ref } from 'vue'
// 通过设置变量myColor改变颜色,这里改为白色
const myColor = ref('#fff')
</script>

<style scoped lamg="less">
// 默认黑色
:root {
    --mycolor: #000;
}
.a {
    color: var(--mycolor)
}
</style>