塩焼きブログ

塩焼きに関しての研究内容を公開しています

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;
}