やりたいこと
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;
}
*/
書き出しエラー
第1引数は配列.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をつけるかどうか悩む。