常用的scss工具方法封装

主要总结开发中常用的工具方法:

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;   /* 显示省略号 */
}