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里使用

效果

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

动态样式

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

全局样式:global()

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