1.安装 stylus(写css使用)插件
cnpm install stylus --save
cnpm install stylus-loader --save
2.使用案例
使用 stylus 注意事项:
- 这里我们使用的长度单位是 rem,参照的基准是在上一篇文章中 reset.css 中设置的50px,换算方式如下:在reset.css 中设置了 html font-size: 50px,1rem = html font-size = 50px,我们案例用的是iphone6,两部像素,所以,若图片高度是86px,那么换算成rem就是:86/2/50 = 0.86rem;
- 可以去掉大括号
{}
, 分号;
- 类名前需要加
.
- Class子类要写在父类之下
0.5
可以去掉0
,写成.5
- 对于 CSS 中一些公共变量,可以处理如下:
第一步:在src/assets/styles
目录下新建variable.styl
文件,这里放置一些公共CSS变量,比如背景颜色:$bgColor = #00bcd4
第二步:引入variable.styl
:@import '~styles/variable.styl'
,使用公共变量:background $bgColor
<style lang="stylus" scoped>
// @:代表src目录,在css中引入其他css,使用 @ 时,前面需要加上 ~
// styles就是我在vue.config.js中设置的路径别名,代表 'src/assets/styles' 路径
@import '~styles/variable.styl'
.header
// 在reset.css 中设置了 html font-size: 50px;
// 1rem = html font-size = 50px,我们案例用的是iphone6,两部像素,所以
// 若图片高度是86px,那么换算成rem就是:86/2/50 = 0.86rem
display flex
line-height: .86rem
background $bgColor
color #fff
.header-left
width .64rem
float left
.back-icon
text-align center
font-size .4rem
.header-input
// 控制居中
flex 1
height .64rem
line-height .64rem
margin-top .12rem
margin-left .2rem
background #fff
border-radius .1rem
color #ccc
.header-input-content
display flex
flex-direction row
padding-left .2rem
.header-right
width 1.24rem
float right
text-align center
.arrow-icon
margin-left -.04rem
font-size .24rem
</style>