sass - Retinal屏border显示1px

@mixin border($top, $right, $bottom, $left, $color:#f00) {
content: " ";
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
color: $color;
$position: '';
$transform-origin: '';
$scale: '';
@if $top == 'auto' or $bottom == 'auto' {
height: 1px;
$scale: 1, .5;
}
@else if $left == 'auto' or $right == 'auto' {
width: 1px;
$scale: .5, 1;
}
@if $top == 'auto' {
$position: bottom;
$transform-origin: 0 100%;
}
@else if $right == 'auto' {
$position: left;
$transform-origin: 0 0;
}
@else if $bottom == 'auto' {
$position: top;
$transform-origin: 0 0;
}
@else if $left == 'auto' {
$position: right;
$transform-origin: 100% 0;
}
border-#{$position} : 1px solid $color;
-webkit-transform-origin: $transform-origin;
transform-origin: $transform-origin;
-webkit-transform: scale($scale);
transform: scale($scale);
z-index: 1;
}
.demo {
position: relative;
&:before {
@include border(0, 0, auto, 0, #666); // top, right, bottom, left, color
}
}