カテゴリー
未分類

Sassの@mixinの引数にmapを使って配列っぽく受け取ってみる

Sassの引数が複数になると指定が面倒になってくるので、引数を配列みたいなもので渡したい。試行錯誤してSass 3.3から実装されたというmapで似たような事を実現できた。

@mixin setFont($args:()) {
$defaults: (
font-size: 14px,
font-weight: normal,
text-decoration: none
);
$values: map-merge($defaults, $args);
font-size: map-get($values, font-size);
font-weight: map-get($values, font-weight);
text-decoration: map-get($values, text-decoration);
}
.class1 {
@include setFont((
font-size: 30px,
));
}
.class2 {
@include setFont((
font-weight: bold,
));
}
.class3 {
@include setFont();
}

指定したものは上書きされ、指定しないものは内部で宣言している$defaultsのものが使われる

.class1 {
font-size: 30px;
font-weight: normal;
text-decoration: none;
}
.class2 {
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.class3 {
font-size: 14px;
font-weight: normal;
text-decoration: none;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA