styls-all-笔记-vuesell

common/stylus/base.styl:

body, html
line-height: 1
font-weight: 200
font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif
// 清除浮动
.clearfix
display: inline-block
&:after
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
// dpr最小为1.5的话，就缩放为0.7倍
@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)
// dpr最小为2的话，就缩放为0.5倍
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)

common/stylus/index.styls:

@import "./mixin" // 导入mixin.styl
@import "./icon"
@import "./base"

---

common/stylus/mixin.styl：

border-1px($color) // 一像素边框问题
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '

border-none()
&:after
display: none

bg-image($url) // 根据dpr的不同，来使用不同的背景图片
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")

---