Vue遇到stylus的坑

Vue遇到stylus的坑
作者：秋名
撰写时间：2020 年 6 月 19 日

使用 stylus 注意事项：
1、这里我们使用的长度单位是 rem，参照的基准是在上一篇文章中 reset.css 中设置的50px，换算方式如下：在reset.css 中设置了 html font-size: 50px，1rem = html font-size = 50px,我们案例用的是iphone6,两部像素，所以，若图片高度是86px，那么换算成rem就是：86/2/50 = 0.86rem；
2、可以去掉大括号{}， 分号；
3、类名前需要加 .
4、Class子类要写在父类之下
5、0.5可以去掉0，写成.5
6、对于 CSS 中一些公共变量，可以处理如下：
  第一步：在src/assets/styles目录下新建 variable.styl 文件，这里放置一些公共CSS变量，比如背景颜色：$bgColor = #00bcd4
  第二步：引入variable.styl： @import '~styles/variable.styl'，使用公共变量：background $bgColor
7、因为stylus简化了css写法,所以子级别class（被父元素包裹的元素的class）应该在父级别class后严格缩进两格，否则无法识别。