app.vue
引入@import “./common/stylus/mixin.styl”
border-1px(rgba(7, 17, 27, 0.1))
mixin.styl
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
base.styl
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
index.styl
@import "./mixin"
@import "./icon"
@import "./base"
main.js
import 'common/stylus/index.styl';
base里面写的媒体查询为了适应不同的分辨率
mixin里面写的都是样式函数为了方便你更改参数
mainjs里面引入的index.styl是将这几个样式文件都注册并加载