Dotted underline border #mixin

_borders.scss

// Dotted underline border.
// https://jsfiddle.net/xandeadx/n16294kk/1/
//
// Usage:
// @include dotted-border;
// @include dotted-border(#bebebe, 3px);
// @include dotted-border(#bebebe, 1px, 3px);
@mixin dotted-border($color: #000, $dot-width: 1px, $separator-width: 1px) {
  background-image: linear-gradient(to right, $color $dot-width, transparent $dot-width);
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: ($separator-width + $dot-width) 1px;
}