关于css:Sass简单封装-高分辨率下-border-1px-美化

https://www.jianshu.com/p/91c...

个别写法全边框

@mixin border_1px($color: #dfe0e1 ) {  position: relative;  &::after {    content: "";    box-sizing: border-box;    position: absolute;    top: 0;    left: 0;    width: 200%;    height: 200%;    border: 1px solid $color;    border-radius: 4px;    transform: scale(0.5);    transform-origin: 0 0;  }}

不同地位分析判断 默认全边框

$color: #bfbece;position: relative;@if $type == default {  &::after {    content: "";    box-sizing: border-box;    position: absolute;    top: 0;    left: 0;    width: 200%;    height: 200%;    border: 1px solid $color;    transform: scale(0.5);    transform-origin: 0 0;  }} @else if $type == top {  &::before {    content: "";    box-sizing: border-box;    position: absolute;    top: 0;    left: 0;    width: 200%;    height: 1px;    background: $color;    transform: scale(0.5);    transform-origin: 0 0;  }} @else if $type == bottom {  &::after {    content: "";    box-sizing: border-box;    position: absolute;    bottom: 0;    left: 0;    width: 200%;    height: 1px;    background: $color;    transform: scale(0.5);    transform-origin: 0 0;  }} @else if $type == left {  &::before {    content: "";    box-sizing: border-box;    position: absolute;    top: 0;    left: 0;    width: 1px;    height: 200%;    background: $color;    transform: scale(0.5);    transform-origin: 0 0;  }} @else if $type == right {  &::before {    content: "";    box-sizing: border-box;    position: absolute;    top: 0;    right: 0;    width: 1px;    height: 200%;    background: $color;    transform: scale(0.5);    transform-origin: 0 0;  }}

全功能混合封装

$gray: #bfbece;@mixin border_1px($type: default, $color: $gray) {  position: relative;  &::after {    content: "";    box-sizing: border-box;    position: absolute;    @if $type == default {      top: 0;      left: 0;      width: 200%;      height: 200%;      border: 1px solid $color;    } @else if $type == top {      top: 0;      left: 0;      width: 200%;      height: 1px;      background: $color;    } @else if $type == bottom {      bottom: 0;      left: 0;      width: 200%;      height: 1px;      background: $color;    } @else if $type == left {      top: 0;      left: 0;      width: 1px;      height: 200%;      background: $color;    } @else if $type == right {      top: 0;      right: 0;      width: 1px;      height: 200%;      background: $color;    }    transform: scale(0.5);    transform-origin: 0 0;  }}

页面调用 @include border_1px(type, color)

• type 五种类型 默认 default 全边框
• color 边框色彩