プロパティをまとめて指定するmixin

やりたいこと

marginの上下・左右だけを一行で指定するMixin - Qiita
↑この話と似た話です。

セレクタ { プロパティ : 値 ; }
複数プロパティで同一値を指定したい時が時々あります。
そのためのmixin。

mixin

sameValues.scss

@mixin sameValues($props,$value){
  @each $prop in $props {
    #{$prop} : $value;
  }
}

使い方

正方形が描きたいな.scss

.square {
  $size: width height;
  @include sameValues($size, 200px);
}
/* 出力
.square {
  width: 200px;
  height: 200px;
}
*/

ブロックを中央に寄せたいな.scss

.center-box {
  margin: {
    @include sameValues(left right, auto);
  }
}
/* 出力
.center-box {
  margin-left: auto;
  margin-right: auto;
}
*/

書き出しエラー

第１引数は配列.scss

@include sameValues(left, right, 10px);
// ↓こうしましょう
@include sameValues(left right, 10px);
// ↓またはこう
$array: left, right;// ここで「,」区切りはOK。スペース区切りでもOK。
@include sameValues($array, 10px);

mixin名の命名で悩む
sameValues→複数出力する
sameValue→値は1つ
複数形のsをつけるかどうか悩む。