scss border1px 懒人生成器 @mixin

适用于scss的border1px

github

优点

使用@media screen方式直接生成class,不占用伪类位置,无需配置loader(当然基本的css-loader和scss-loader还是要的).

支持生成任意名字,颜色(#和rgba)和线条类型的mixin,通过@include 使用,方便灵活,生成的css冗余小,scss热更新模式下编译速度快.

缺点

需要在html中手动加上生成的class,暂时只支持一次生成一边或全部边框,不支持一次生成多个边框,例如border-left+border-right

代码

// border1px.scss
@mixin borderCreator($name, $direction, $type, $color) {
  .border-#{$name} {
    @if $direction!= "" {
      border-#{$direction}: 1px $type $color;
    } @else {
      border: 1px $type $color;
    }
  }

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-#{$name} {
      @if $direction!= "" {
        border-#{$direction}: 0.5px $type $color;
      } @else {
        border: 0.5px $type $color;
      }
    }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-#{$name} {
      @if $direction!= "" {
        border-#{$direction}: 0.333333px $type $color;
      } @else {
        border: 0.333333px $type $color;
      }
    }
  }
}

使用例子

创建一个全包虚线边框 border:1px dashed #979797

// usage.scss
@import "@/scss/border_1px.scss"; //引入文件

@include borderCreator("btn", "", dashed, #979797); //创建一个名字为`border-btn`的class

生成的css结果

.border-btn {
    border: 1px dashed #979797;
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
	.border-btn {
	    border: 0.5px dashed #979797;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 3){
	.border-btn {
	    border: 0.333333px dashed #979797;
	}
}

底部实线边框 border-bottom:1px solid rgba(185, 185, 185, 0.5)

// usage.scss
@import "@/scss/border_1px.scss"; //引入文件

@include borderCreator("cut-line", "bottom", solid, rgba(185, 185, 185, 0.5));

生成的css结果

.border-cut-line {
    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
	.border-cut-line {
    	border-bottom: 0.5px solid rgba(185, 185, 185, 0.5);
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 3){
	.border-cut-line {
	    border-bottom: 0.333333px solid rgba(185, 185, 185, 0.5);
	}
}