Scss(Sass)でretinaで綺麗な1pxの線を引く

かなり前に、Retina Display向け.5pxのborderまとめという記事を書きましたが、Desktop版も含めると色々綺麗なborderにならなかったりします。

そこで、別の方法でできないかと調べたところ以下の方法で実現が可能らしいということがわかりました。

• Svg, Gifを使う
• transform: scale()を使う

というわけで、mixinつくってみました。IE/Android Browserは見てないです。
それ以外はだいたい大丈夫でわと（テキトー…）。
というわけでとりあえずSass(Scss)版。そのうちStylus版くらい用意するかも。

/**
 * # retinaで綺麗な1pxのborderを敷くmixin
 * @color: hex, rgb(a)/ default #000
 * @direction: top,left,right,bottom/ default 'top'
 * @pseudo: before,after/ default 'before'
 */

@import 'media-retina';

@mixin border-hairline(
  $color: "#000",
  $direction: 'top',
  $pseudo: 'before'
){
  $background-svg: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='.5' height='.5'><rect fill='#{$color}' x='0' y='0' width='.5' height='.5'/></svg>");

  position: relative;

  // default: not retina
  &:#{$pseudo} {
    content: ' ';
    position: absolute;

    @if($direction == 'top') {
      top: 0;
      left: 0;
    }
    @if($direction == 'bottom') {
      bottom: 0;
      left: 0;
    }
    @if($direction == 'left') {
      top: 0;
      left: 0;
    }
    @if($direction == 'right') {
      top: 0;
      right: 0;
    }
    @if($direction == 'top' or $direction == 'bottom') {
      background: $background-svg;
      height: 1px;
      width: 100%;
    }
    @else {
      background: $background-svg;
      background-repeat: repeat-y;
      height: 100%;
      width: 1px;
    }
  }

  @include media-retina {
    &:#{$pseudo} {
      @if($direction == 'top') {
        transform: scaleY(.5);
      }
      @if($direction == 'left') {
        transform: scaleX(.5);
      }
      @if($direction == 'bottom') {
        transform: scaleY(.5) translateY(.5px);
      }
      @if($direction == 'right') {
        transform: scaleX(.5) translateX(.5px);
      }
    }
  }
}

ちなみに、ググったらretinaの1pxってhairlineって言うっぽいです。