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

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

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

.block {
  padding-top: 50px; 
}
@media only screen and (max-width: 767px) {
    .block {
      padding-top: 25px; 
  } 
}

 

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

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

@mixin padding-top(){
  padding-top: 50px;
  @media only screen and (max-width: 767px){
    padding-top: 25px;
  }
}

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

.block{
    @include padding-top();
}

---

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

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

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

$breakpoint: "only screen and (max-width: 767px)";

@mixin padding-top(){
  padding-top: 50px;
  @media #{$breakpoint}{
    padding-top: 25px;
  }
}

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

---

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

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

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

$breakpoint: "only screen and (max-width: 767px)";

@mixin padding-top($pc: 50px, $sm:25px){
 padding-top: $pc;
 @media #{$breakpoint}{
  padding-top: $sm;
 }
}

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

.block{
    @include padding-top(100px, 50px);
}

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

---

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

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

$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を作ります。

$breakpoint: "only screen and (max-width: 767px)";

@mixin css($property, $pc_value, $sm_value) {
 #{$property}:$pc_value;
 @media #{$breakpoint}{
 #{$property}:$sm_value; 
 }
}

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

.block{
    @include css(margin-top, 100px, 50px);
    @include css(padding-top, 100px, 50px);
}

---

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

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

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

-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を作っておくと

@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}

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

@include css3(box-shadow, 1px 1px 1px #000);