1 つ前の記事でpadding: ...だけを返す Mixin を作りましたが、もしかしたらそういう関数を使用したほうが適任かもしれません。関数を使うと値を加工することができます。
関数は@functionを使って定義できます。また@returnを使って何かしら値を返すようにする必要があります。（JavaScript などに似てます）
@function gutter($type) {
// 他で使わないなら入れちゃっても
$gutters: (
sp: 0 0.3em,
pc: 0 1em
);
// not + $gutters に @type (spかpc) が定義されているか
// -> $type が sp と pc 以外の値の時
@if not map-has-key($gutters, $type) {
@error "#{map-keys($gutters)}を指定してください";
}
@return map-get($gutters, $type);
}
div {
padding: gutter('sp');
}
@media screen and (min-width: 768px) {
div {
padding: gutter('pc');
}
}制御構文
@if
状態には真偽値（boolean）を返すようにします。また、@else ifと@elseは両略できます。
@if 状態 {
// ...
} @else if 状態 {
// ...
} @else {
// ...
}@each
連想配列などを回したりできます。汎用セレクタを量産する時とか。
$colors: (
success: #018952,
danger: #ed5e6b
);
@each $key, $color in $colors {
.button-#{$key} {
background: $color;
}
}/* 結果 */
.button-success {
background: #018952;
}
.button-danger {
background: #ed5e6b;
}@for
同じように色々返す時。
@for $i from 1 through 3 {
.mt-${i} {
margin-top: $ipx
}
}/* 結果 */
.mt-1 {
margin-top: 1px;
}
.mt-2 {
margin-top: 2px;
}
.mt-3 {
margin-top: 3px;
}値を決めたいようなものは@function化すると Mixin の巨大化も防げるかもしれません。
