ブレークポイントで、CSSの「プロパティ」と「値」を切り替えるmixinの作り方


レスポンシブサイトを作っているときに、スマホとPC閲覧時でCSSでプロパティの値を切り分ける必要があります。

例えば、<div class=”block”></div>のpadding-topが、PCは50px、スマホは25pxとしたい時のCSSは次のようになります。

※ブレークポイントを767pxにした時。

 

この記述を毎回、手で書いていたら時間がかかります。そこでsassを使うと便利なのです。

あらかじめ↓のようなmixinを定義しておきます。

そうすると、scss側では↓のような記述だけでOKになるわけです。Sass便利。


このmixinを、もっと短縮化してみます。ブレークポイントを指定する「only screen and (max-width: 767px)」の記述ですが、「$変数名」の形であらかじめ定義しておくことができます。

単純な値ならば、同じように「$変数名」で読み出せます。

文字列などなら、「#{$変数名}」ですね。なので、先程の記述は次のように書き換えれます。

これでmixinを沢山作ったときも、一度にブレークポイントを変更することが容易になりました。


ところで、このmixinはPCが50px、スマホは25pxで固定です。

これでは、値を変更したくなったら、その都度、mixinを作ることになってしまいます。

そこで、引数を用意してあげましょう。

このようにmixinに引数を設定してあげると、次のように()に数値を設定すると、値を変えることができます。

()を空にすれば、いままで通りPCは50px、スマホは25pxとなります。


さてさて、これはpadding-topのmixinですが、marginのmixinを作りたくなったらどうしましょう。

このままでは、↓のようにmarginやpaddingごとにmixinを作ることが必要です。

こんな風にmixinを沢山作るのも大変ですね。

 

そこで次のようなmixinを作ります。

このようにmixinを記述すると、プロパティとPC、スマホそれぞれの値を変更することができます。


このようにプロパティの文字列も変数にしてしまうと、記述が少ないmixinを作ることが可能です。

例えば、css3でシャドウを付ける場合は「box-shadow: 1px 1px 1px #000;」のように記述します。

さらに、ベンダープレフィックスを付けた場合は、次のようになってしまいます。

 

そこで、Sassの機能を使って↓のようにmixinを作っておくと

↓のように記述することが可能です。

 

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン