Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

ミックスインでカンマを使うプロパティを指定する時

Dev

ミックスインを使う時、カンマを使うプロパティで値を指定すると、引数の複数指定と間違われて困るので可変長引数( @mixin$valueの後に ... を追加)を指定してあげることで引数の複数指定と間違われずにエラーを回避できる。
コンパイル後の CSS#000 => black , #fff => white ってなってるのが気になった。

@mixin text-shadow($value...) {                                                                                                                                          
  text-shadow: $value;
}

.test {
  @include text-shadow(1px 1px 0 #000, 2px 2px 0 #fff);
}
.test {
  text-shadow: 1px 1px 0 black, 2px 2px 0 white;
}

他のやり方では $value 内の指定を リストにするとか文字列にすることで、同じようにエラーを回避できる。
文字列にした場合、コンパイル後の CSS#000,#fff そのままだな。

/* Sass */
@mixin text-shadow($value) {                                                                                                                                          
  text-shadow: $value;
}

.test {
  @include text-shadow((1px 1px 0 #000, 2px 2px 0 #fff));
}

.test {
  @include text-shadow(unquote("1px 1px 0 #000, 2px 2px 0 #fff"));
}
/* CSS */
.test {
  text-shadow: 1px 1px 0 black, 2px 2px 0 white;
}

.test {
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #fff;
}