よく使われるscss mixinをまとめます

今までよく使われるscss mixinをまとめします。
更新中。:santa:

### 一、真  1pxボーダー
Retinaディスプレイのピクセル密度比により、実際の1pxボーダーは予想以上太く見えます。より細くしたいために、以下のコードを使用できます。

parameter説明：

|name|description|type|default|
|:-----------------|------------------:|:------------------:|:------------------:|
|directions|４つのborderを示す場合`(top, left, bottom, right)`で設定する、下borderのみ示す場合`bottom`で設定する|List又はString|bottom|
|color|border-color|Colors|#ccc|
|radius|border-radius|List|`(０, ０, ０, ０)`|
|position|擬似要素|String|after|

```scss:mixin.scss
@mixin realOneBorder(
  $directionMaps: bottom,
  $color: #ccc,
  $radius: (
    0,
    0,
    0,
    0
  ),
  $position: after
) {
  //　渡されるdirectionMapsのtypeはListかStringかを判断する
  $isOnlyOneDir: string==type-of($directionMaps);

  @if ($isOnlyOneDir) {
    $directionMaps: ($directionMaps);
  }

  @each $directionMap in $directionMaps {
    border-#{$directionMap}: 1px solid $color;
  }

  @if (list==type-of($radius)) {
    border-radius: nth($radius, 1) + px
      nth($radius, 2) + px
      nth($radius, 3) + px
      nth($radius, 4) + px;
  } @else {
    border-radius: $radius;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    & {
      position: relative;

      @each $directionMap in $directionMaps {
        border-#{$directionMap}: none;
      }
    }

    &:#{$position} {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      box-sizing: border-box;
      padding: 1px;
      transform-origin: 0 0;
      pointer-events: none;
      border: 0 solid $color;

      @each $directionMap in $directionMaps {
        border-#{$directionMap}-width: 1px;
      }

      @if (list==type-of($radius)) {
        border-radius: nth($radius, 1) *
          2 + px
          nth($radius, 2) *
          2 + px
          nth($radius, 3) *
          2 + px
          nth($radius, 4) *
          2 + px;
      } @else {
        border-radius: $radius * 2;
      }
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:#{$position} {
      @if (list==type-of($radius)) {
        border-radius: nth($radius, 1) *
          3 + px
          nth($radius, 2) *
          3 + px
          nth($radius, 3) *
          3 + px
          nth($radius, 4) *
          3 + px;
      } @else {
        border-radius: $radius * 3;
      }

      width: 300%;
      height: 300%;
      transform: scale(0.3333);
    }
  }
}

```
DEMO：
[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-f2gdx?fontsize=14&hidenavigation=1&theme=dark)


### 二、長いテキストに省略記号（…）を付ける方法
|name|description|type|default|
|:-----------------|------------------:|:------------------:|:------------------:|
|rowCount|行数、単一行または複数行を支持してる|Number|1|


```scss:mixin.scss
@mixin ellipsis($rowCount: 1) {
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}
```

DEMO：
[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-1e4w4?fontsize=14&hidenavigation=1&theme=dark)

### 三、正三角形
ドロップダウンメニューなどの方向を示すiconとしてよく使われますね〜、

|name|description|type|default|
|:-----------------|------------------:|:------------------:|:------------------:|
|size|サイズ|String|5px|
|color|color|Colors|rgba(0, 0, 0, 0.6)|
|dir|方向|String|bottom|

```scss:mixin.scss
@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
  width: 0;
  height: 0;
  border-style: solid;

  @if (bottom==$dir) {
    border-width: $size $size 0 $size;
    border-color: $color transparent transparent transparent;
  } @else if (top==$dir) {
    border-width: 0 $size $size $size;
    border-color: transparent transparent $color transparent;
  } @else if (right==$dir) {
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent $color;
  } @else if (left==$dir) {
    border-width: $size $size $size 0;
    border-color: transparent $color transparent transparent;
  }
}
```

DEMO：
[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-xw8un?fontsize=14&hidenavigation=1&theme=dark)