Googleのマテリアルデザインは、フラットデザインに影がついてるだけと思われがちですが、厳密にたくさんのルールが存在しています。そのあたりはマテリアルデザインのガイドラインが存在しているのでぜひ一読することをおすすめします。Googleの考えるデザインの勉強にもなりますので、ぜひぜひ😊。

今回はマテリアルデザインの高度（重なり方）におけるbox-shadowのclassを予め作っておこうというお話。

Elevationsの重なり高度の確認

マテリアルデザインのガイドラインによると、Elevations（重なり高度）は1～24まであります。

Elevation (dp)	Component
24	Dialog Picker
16	Nav drawer Right drawer Modal bottom Sheet
12	Floating action button (FAB – pressed)
9	Sub menu (+1dp for each sub menu)
8	Bottom navigation bar Menu Card (when picked up) Raised button (pressed state)
6	Floating action button (FAB – resting elevation) Snackbar
4	App Bar
3	Refresh indicator Quick entry / Search bar (scrolled state)
2	Card (resting elevation) * Raised button (resting elevation)* Quick entry / Search bar (resting elevation)
1	Switch

単位dpはandroidの画面解像度がいろいろあるので生まれた単位くらいに思っといてくれればたぶん大丈夫。
webサイトの作成においては、px単位と同じようなもんです。つまり1px～24pxまでの高度があるということです。高度が高ければ高いほど、ぼかしの度合いも大きくなる。そこがポイントになります。

したがって、高度の数値とぼかしの数値が一致すれば、box-shadowの設定ができそうです。

box-shadow用のclassのためのSCSSを組み立てる

@forを使うことで、くり返しができるので1から24までということで @for $i from 1 through 24を設定。後は#{$i}に単位のpxをくっつけて、box-shadowの広がり部分に数値が入っていくようにしました。

これによって、コンパイルされるclassは以下のようになります。

あとは、ガイドラインに合わせて、class=”～”の部分にできあがったclassを入れていけば、マテリアルデザインにおける高度の影が完成します。

mixinで作ったタイプ

classとは別にhover時を始めとして、何かしらのアクションを取ったときに高度が変わるときは、classだと不便なときもあります。

そんなときは、mixinを使って、高度の設定をします。

例えば、カードタイプだと、通常が高度2で選択時（hover時）は高度8になるので

こんな感じでSCSS書けばOK❗
好みに合わせてtransitionを設定すると、ふわっとしたアニメーションになります。