主要总结开发中常用的工具方法:
1.移动端1px
@mixin border1($bColor,$type:bottom){position: relative;&::before{content:'';display: block;position: absolute;left:0;right: 0;@if ($type == 'top'){top: 0;}@if ($type == 'bottom'){bottom: 0;}border-#{$type}: 1px solid $bColor;transform: scaleY(0.5);}
}
2.宽高的设定
@mixin wh($w,$h:$w){width: $w;height: $h;min-width: $w;
}
3.ios手机的安全区域适配
//iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max适配
@mixin ipAdaptive($name:'p',$n:''){@if ($name == 'p'){padding-bottom: calc(#{$n} + constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/padding-bottom: calc(#{$n} + env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/}@else if($name == "m"){/* 可以通过margin-bottom来适配 */margin-bottom: calc(#{$n} + constant(safe-area-inset-bottom));margin-bottom: calc(#{$n} + env(safe-area-inset-bottom));}@else if($name == "h"){/* 或者改变高度*/height: calc(#{$n} + constant(safe-area-inset-bottom));height: calc(#{$n} + env(safe-area-inset-bottom));}
}
4.单行省略号
@mixin unline {overflow: hidden;text-overflow: ellipsis;white-space: no-wrap;
}
5.多行省略
@mixin ellipsis($row:1){display: -webkit-box; /* WebKit内核浏览器支持 */-webkit-line-clamp: $row; /* 限制显示的行数 */-webkit-box-orient: vertical; /* 垂直方向展示 */overflow: hidden; /* 超出部分隐藏 */text-overflow: ellipsis; /* 显示省略号 */
}
