stylus解决移动端1像素线等问题
引用了yo框架中的_border.scss(用来获取yo框架封装的border) 以及 variables.scss(用来获取媒体查询的规则)
1 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) 2 // 为边框位置提供定位参考 3 position: relative; 4 5 if $border-width == null 6 $border-width: 0; 7 8 border-radius: $radius; 9 10 &::after 11 // 用以解决边框layer遮盖内容 12 pointer-events: none; 13 position: absolute; 14 z-index: 999; 15 top: 0; 16 left: 0; 17 // fix当元素宽度出现小数时，边框可能显示不全的问题 18 // overflow: hidden; 19 content: "\0020"; 20 border-color: $border-color; 21 border-style: $border-style; 22 border-width: $border-width; 23 24 // 适配dpr进行缩放 25 @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49),
(max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) 26 width: 100%; 27 height: 100%; 28 if $radius != null { 29 border-radius: $radius; 30 } 31 32 @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) 33 width: 200%; 34 height: 200%; 35 transform: scale(.5) 36 if $radius != null { 37 border-radius: $radius * 2; 38 } 39 40 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),
(min-device-pixel-ratio: 2.5),(min-resolution: 240dpi),(min-resolution: 2.5dppx) 41 width: 300%; 42 height: 300%; 43 transform: scale(.33333) 44 if $radius != null { 45 border-radius: $radius * 3; 46 } 47 48 transform-origin: 0 0;
省略点ellipsis的解决方案（支持多行）
1 wrap($is-wrap = true) 2 if $is-wrap == true 3 word-wrap: break-word; 4 word-break: break-all; 5 else 6 white-space: nowrap; 7 9 ellipsis($width = null, $line-clamp = 1) 10 overflow: hidden; 11 text-overflow: ellipsis; 12 width: $width; 13 if abs($line-clamp) > 1 14 // 要使得多行截取生效，display的值只能为-webkit-box 15 display: -webkit-box !important; 16 -webkit-line-clamp: $line-clamp; 17 flex-direction column 18 wrap() 19 else 20 wrap(false)
将上述代码放入styl文件中，就可以直接使用！
