border-radius：
1 border($border-width = 1px, $border-color = #ccc , $border-style = solid, $radius = null) 2 // 为边框位置提供定位参考 3 position: relative; 4 if $border-width == null 5 $border- 0; 6 7 border-radius: $radius; 8 &::after 9 // 用以解决边框layer遮盖内容 10 pointer-events: none; 11 position: absolute; 12 z-index: 999; 13 top: 0; 14 left: 0; 15 // fix当元素宽度出现小数时，边框可能显示不全的问题 16 // overflow: hidden; 17 content: " 020"; 18 border-color: $border-color; 19 border-style: $border-style; 20 border- $border-width; 21 // 适配dpr进行缩放 22 @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) 23 100%; 24 height: 100%; 25 if $radius != null 26 border-radius: $radius; 27 28 @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) 29 200%; 30 height: 200%; 31 transform : scale(.5); 32 if $radius != null 33 border-radius: $radius * 2; 34 35 @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) 36 300%; 37 height: 300%; 38 transform : scale(.33333); 39 if $radius != null 40 border-radius: $radius * 3; 41 42 transform-origin : 0 0;
1 border($border-width = 1px, $border-color = #ccc , $border-style = solid, $radius = null) 2 // 为边框位置提供定位参考 3 position: relative; 4 if $border-width == null 5 $border- 0; 6 7 border-radius: $radius; 8 &::after 9 // 用以解决边框layer遮盖内容 10 pointer-events: none; 11 position: absolute; 12 z-index: 999; 13 top: 0; 14 left: 0; 15 // fix当元素宽度出现小数时，边框可能显示不全的问题 16 // overflow: hidden; 17 content: " 020"; 18 border-color: $border-color; 19 border-style: $border-style; 20 border- $border-width; 21 // 适配dpr进行缩放 22 @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) 23 100%; 24 height: 100%; 25 if $radius != null 26 border-radius: $radius; 27 28 @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) 29 200%; 30 height: 200%; 31 transform : scale(.5); 32 if $radius != null 33 border-radius: $radius * 2; 34 35 @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) 36 300%; 37 height: 300%; 38 transform : scale(.33333); 39 if $radius != null 40 border-radius: $radius * 3; 41 42 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 8 9 ellipsis($width = null, $line-clamp = 1) 10 overflow: hidden; 11 text-overflow: ellipsis; 12 $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)
使用方法：
引入：
赋值：
如：
