やっとわかった@mixin

使いどころがイマイチ分からなかったけど、リファクタリングしていて今更やっと理解できた。

@mixin

@mixin btn-color($color_a,$color_b) {
  background-color:$color_a;
  color: $color_b;
  &:hover {
    color:$color_a;
    border:solid 2px $color_b;
  }
}

@include

.btn-red {
  @include btn-color(#F00,#FFF);
}

吐き出されるcss

.btn-red {
  background-color: #F00;
  color: #FFF;
}
.btn-red:hover {
  color: #F00;
  border: solid 2px #FFF;
}