vue中css代码优化----样式篇

在写css的时候有时候会大量重复使用一些颜色，加入今后要修改，就得修改所有的地方，这样显然不符合分离的设计（解耦）。所以应该怎么做呢？

1.创建一个新文件，里面存放样式

varibles.stylus：

$bgColor=#00bcd4

2.在style中引用

这里一定要注意，@是webpack定义的src目录。但是这里在使用是需要加~ 即~@

@import "文件所在的相对路径/varibles.stylus"
或者使用~@代替路径
@import "~@/assets/styles/varibles.stylus"

3.使用

最后将 #00bcd4 替换成 $bgColor

vue中css代码优化----样式篇相关推荐

Vue 中 css scoped 样式穿透 ( stylus[] / sass / less[/deep/] )
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...
Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
系列九、vue中css样式字体设置为华文行楷
一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址链接:https: ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中绑定style样式的方式
vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式 css样式 <style>.red {color: red}.green {color: green}.big {fo ...
vue中scoped的样式污染处理
1.为什么要用scoped? 当组件间的类名相同时,会发生css样式污染问题. 如果是父子组件有相同类名,则样式都为父组件中的同类名样式,如果是兄弟组件,看哪个组件最后创建,样式就以哪个为主进行覆盖之 ...
vue中:class实现样式的绑定
在vue中通过 :class 实现实现标签中条件与样式的绑定示例代码: <div class="right" :class="{ kuan: 条件1, bi ...
vue中修改滚动条样式
该方法只适用于Chrome浏览器样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就可以 ::-webkit-scrollbar {width: ...

vue中css代码优化----样式篇

在写css的时候有时候会大量重复使用一些颜色，加入今后要修改，就得修改所有的地方，这样显然不符合分离的设计（解耦）。所以应该怎么做呢？

vue中css代码优化----样式篇相关推荐

最新文章

热门文章