わーくあうと！

日々の作業でためになったことをアウトプットすることで自分の成長につながればなと。

トップ > 未分類 > LESSのbox-shadow、transitionなどで複数パラメータを使用する

LESSのbox-shadow、transitionなどで複数パラメータを使用する

未分類

すいませんすいません。最近アプリ開発をサボってちょっとしたWebサイト作ってます・・・。

で、久しぶりにcssいじってたらLESSなんて便利なものがあったので使ってたのですが、『box-shadow』や『transition』で複数の値をカンマ区切りでいい感じに指定する方法が見つからなくて悩んだので解決策をメモっておきます。

解決までの経緯を書くのが面倒なので、最終的なコードを晒すと

/* box-shadow. */
.box-shadow(...) {
 @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
 -webkit-box-shadow: @props;
 -moz-box-shadow: @props;
 -ms-box-shadow: @props;
 -o-box-shadow: @props;
 box-shadow: @props;
}
.box-shadow(@style) {
 -webkit-box-shadow: @style;
 -moz-box-shadow: @style;
 -ms-box-shadow: @style;
 -o-box-shadow: @style;
 box-shadow: @style;
}

こんな感じでmixin定義。で、

.box-shadow(0 0 10px 0 rgba(0,0,0,0.2), inset 0 0 10px 0 rgba(255,0,0,0.2);

こんな感じで呼び出す。 複数指定しない場合は

.box-shadow(0 0 10px 0 rgba(0,0,0,0.2);

こんな感じ。

で、「RGBAの値を入力するのが面倒だ！16進数指定したい！hex！」って場合は

.box-shadow(0 0 10px 0 fade(#000, 20%);

という書き方もできる。

このmixinについてざっくり説明すると、引数が複数の場合は上の .box-shadow を呼んで、引数が一つの場合は下の .box-shadow を呼ぶようになっている。

また、『transition』でも同じように

/* transition. */
.transition(...) {
 @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
 -webkit-transition: @props;
 -moz-transition: @props;
 -ms-transition: @props;
 -o-transition: @props;
 transition: @props;
}
.transition(@style) {
 -webkit-transition: @style;
 -moz-transition: @style;
 -ms-transition: @style;
 -o-transition: @style;
 transition: @style;
}

と定義しておけば複数パラメータに対応できる。