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




效果

vue3中 css的变量_第1张图片

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

vue3中 css的变量_第2张图片

动态样式

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




全局样式:global()

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

你可能感兴趣的:(vue.js,前端,css)