`background-image`で破線を作ります

dashed-line.scss

// @desc - `background-image`で破線を作ります
// @param {String} $height [1px] - 破線の高さを指定します。
// @param {String} $borderWidth [4px] - ボーダー（実線）の幅を指定します。
// @param {String} $borderColor [currentColor] - ボーダー（実線）の色を指定します。
// @param {String} $intervalWidth [2px] - 間隔の幅を指定します。
// @param {String} $intervalColor [transparent] - 間隔の色を指定します。
// @example scss - Usage
// .foo { @include dashed-line(1px, 4px, #000, 2px, transparent); }
//
// @example css - CSS output
// .foo {
//   background-image: linear-gradient(to right,#000,#000 4px,transparent 4px,transparent 6px);
//   background-size: 6px 1px;
//   background-repeat: repeat-x;
// }
@mixin dashed-line($height: 1px, $borderWidth: 4px, $borderColor: currentColor, $intervalWidth: 2px, $intervalColor: transparent) {
  background-image: linear-gradient(to right, $borderColor, $borderColor $borderWidth, $intervalColor $borderWidth, $intervalColor ($borderWidth + $intervalWidth));
  background-size: ($borderWidth + $intervalWidth) $height;
  background-repeat: repeat-x;
}