css改进

最新推荐文章于 2024-06-04 18:04:50 发布

小普同学666

最新推荐文章于 2024-06-04 18:04:50 发布

阅读量48

点赞数

分类专栏：笔记文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_48312855/article/details/131377293

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css拆分

我亲爱的同事教我的
可以单独一个文件,把经常用的css拆分开来,使用时class里用就行啦

比如以下示例
旧版
test.vue

<template>
<div class="outer">
 halo halo 
</div>
<div clas"inner">
css test
</div>
</template>
<style>
.outer{
   padding:10px;
   background:red;
}
.inner{
   padding:10px;
   background:blue;
}
</style>

改进版
global.scss

.padding-10{
   padding:10px;
}
.padding-20{
   padding:20px;
}

test.vue

<template>
<div class="outer padding-10">
 halo halo 
</div>
<div clas"inner padding-10">
css test
</div>
</template>
<style>
.outer{
   background:red;
}
.inner{
   background:blue;
}
</style>