ブレークポイントで、CSSの「プロパティ」と「値」を切り替えるmixinの作り方
レスポンシブサイトを作っているときに、スマホとPC閲覧時でCSSでプロパティの値を切り分ける必要があります。
例えば、<div class=”block”></div>のpadding-topが、PCは50px、スマホは25pxとしたい時のCSSは次のようになります。
※ブレークポイントを767pxにした時。
|
1 2 3 4 5 6 7 8 |
.block { padding-top: 50px; } @media only screen and (max-width: 767px) { .block { padding-top: 25px; } } |
この記述を毎回、手で書いていたら時間がかかります。そこでsassを使うと便利なのです。
あらかじめ↓のようなmixinを定義しておきます。
|
1 2 3 4 5 6 |
@mixin padding-top(){ padding-top: 50px; @media only screen and (max-width: 767px){ padding-top: 25px; } } |
そうすると、scss側では↓のような記述だけでOKになるわけです。Sass便利。
|
1 2 3 |
.block{ @include padding-top(); } |
このmixinを、もっと短縮化してみます。ブレークポイントを指定する「only screen and (max-width: 767px)」の記述ですが、「$変数名」の形であらかじめ定義しておくことができます。
単純な値ならば、同じように「$変数名」で読み出せます。
文字列などなら、「#{$変数名}」ですね。なので、先程の記述は次のように書き換えれます。
|
1 2 3 4 5 6 7 8 |
$breakpoint: "only screen and (max-width: 767px)"; @mixin padding-top(){ padding-top: 50px; @media #{$breakpoint}{ padding-top: 25px; } } |
これでmixinを沢山作ったときも、一度にブレークポイントを変更することが容易になりました。
ところで、このmixinはPCが50px、スマホは25pxで固定です。
これでは、値を変更したくなったら、その都度、mixinを作ることになってしまいます。
そこで、引数を用意してあげましょう。
|
1 2 3 4 5 6 7 8 |
$breakpoint: "only screen and (max-width: 767px)"; @mixin padding-top($pc: 50px, $sm:25px){ padding-top: $pc; @media #{$breakpoint}{ padding-top: $sm; } } |
このようにmixinに引数を設定してあげると、次のように()に数値を設定すると、値を変えることができます。
|
1 2 3 |
.block{ @include padding-top(100px, 50px); } |
()を空にすれば、いままで通りPCは50px、スマホは25pxとなります。
さてさて、これはpadding-topのmixinですが、marginのmixinを作りたくなったらどうしましょう。
このままでは、↓のようにmarginやpaddingごとにmixinを作ることが必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$breakpoint: "only screen and (max-width: 767px)"; @mixin padding-top($pc: 50px, $sm:25px){ padding-top: $pc; @media #{$breakpoint}{ padding-top: $sm; } } @mixin margin-top($pc: 50px, $sm:25px){ margin-top: $pc; @media #{$breakpoint}{ margin-top: $sm; } } |
こんな風にmixinを沢山作るのも大変ですね。
そこで次のようなmixinを作ります。
|
1 2 3 4 5 6 7 8 |
$breakpoint: "only screen and (max-width: 767px)"; @mixin css($property, $pc_value, $sm_value) { #{$property}:$pc_value; @media #{$breakpoint}{ #{$property}:$sm_value; } } |
このようにmixinを記述すると、プロパティとPC、スマホそれぞれの値を変更することができます。
|
1 2 3 4 |
.block{ @include css(margin-top, 100px, 50px); @include css(padding-top, 100px, 50px); } |
このようにプロパティの文字列も変数にしてしまうと、記述が少ないmixinを作ることが可能です。
例えば、css3でシャドウを付ける場合は「box-shadow: 1px 1px 1px #000;」のように記述します。
さらに、ベンダープレフィックスを付けた場合は、次のようになってしまいます。
|
1 2 3 4 5 |
-webkit-box-shadow: 1px 1px 1px #000; -moz-box-shadow: 1px 1px 1px #000; -ms-box-shadow: 1px 1px 1px #000; -o-box-shadow: 1px 1px 1px #000; box-shadow: 1px 1px 1px #000; |
そこで、Sassの機能を使って↓のようにmixinを作っておくと
|
1 2 3 4 5 |
@mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { #{$prefix}#{$property}: $value; } } |
↓のように記述することが可能です。
|
1 |
@include css3(box-shadow, 1px 1px 1px #000); |
