Vue前端css定义全局变量样式并使用

在Vue中使用

• scss 和 sass: 用 $titColor: red; ，$定义
• less: 用 @titColor: red; ，@定义

案例

<template>
    <div class="box">
        <div class="tit">我是标题</div>
    </div>
</template>
<style scoped lang="scss">
/* 这个必须在less或者scss或者sass才可以使用,原生html报错, 或者写在重置样式文件里面,引入文件到使用的组件里面,或者文件全局挂载在main.js中 */
$titColor: red;
.box {
    .tit {
        color: $titColor;
    }
}
</style>

效果

推荐

博主
博主
博主

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！