もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選

@content でMedia Queriesを管理

@contentはMedia Queriesを設定するのに最適です( ˇωˇ )
例としてMedia Queriesのmixinを作りました。

mixin

@contentで任意のスタイルが記述できるように設定ができます( ˇωˇ )

/* ===================================================================

@content style

=================================================================== */

@mixin query($size){
  
  //メディアqueryの設定
  @media all and (max-width: $size + px) {
    //styleを記述できるように設定
    @content;
  }
  
}

mixin 呼び出し方

@include query(指定したいサイズ);で呼び出せば、簡単にMedia Queriesを設定することができます( ˇωˇ )

.content{
  display: none;
  @include query(320) {
    display: block;
  }
}

生成されるCSS

CSSはこのように生成されます( ˇωˇ )

.content {
  display: none; }
  @media all and (max-width: 320px) {
    .content {
      display: block; } 
}

@if+@content でブレイクポイントをブラウザごとに設計する

ブラウザごとのサイズを@ifを使って設計することができます( ˇωˇ )

Sass mixin

はじめにデバイスサイズごとにあらかじめ変数で定義をします( ˇωˇ )

/* ===================================================================

@if+@content style

=================================================================== */

//ブレイクポイントを設定
$tablet: 1024px;
$sp: 640px;
$iphone: 320px;

@mixin media($mediaSize){

  //もしタブレットだったら
  @if $mediaSize == tablet{
    @media all and (max-width: $tablet + px) {
      @content
    }
  }

  //もしスマホだったら
  @else if $mediaSize == sp{
    @media all and (max-width: $sp + px) {
      @content
    }
  }

  //もしiphoneだったら
  @else if $mediaSize == iPhone{
    @media all and (max-width: $iphone + px){
      @content
    }
  }

}

mixin 呼び出し方

ifで区切っているので、指定したいデバイスを呼び出せば簡単に設定できます( ˇωˇ )

.content{
  width: 500px;
  float: left;

  //タブレットの場合
  @include media(tablet){
    margin: 0px;
  }

  //スマホの場合
  @include media(sp){
    width: 50%;
  }

  //iPhoneの場合
  @include media(iPhone){
    width: 100%;
    float: none;
  }
}

生成されたCSS

.content {
  width: 500px;
  float: left; }
  @media all and (max-width: 1024px) {
    .content {
      margin: 0px; }
}
  @media all and (max-width: 640px) {
    .content {
      width: 50%; } 
}
  @media all and (max-width: 320px) {
    .content {
      width: 100%;
      float: none; } 
}

まとめ

いかがでしたでしょうか。
SassもJavaScriptのように、ループで回したり条件をわけたりできるなど、なかなか奥が深いなと思いました。

これでより効率のいいコーディングができたらと思います( ˇωˇ )

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。