Sass(scss)で楽にレスポンシブデザイン

レスポンシブデザインのページをフレームワークとか一切使わずに作るとき、@media内と外にコードが分散して読みにくくなるのがいやだったのでSassを使って要素ごとにまとめられるようにした。
smallとmediumとかmediumとlargeの両方で同じCSSを使うことが多々あったので、複数サイズで同じコードを利用するとき簡単に指定できるようにした。
吐き出したCSSの見た目はあまり考慮していません。

環境

• macOS High Sierra 10.13.1
• Sass 3.5.3
• Coda 2.6.9
• Sass for Coda 3.1.1

実装

まずmixinを定義する。以下のコードをscssファイルの上部に入力すればよい。

@mixin media($a: false, $b: false, $c: false){
    $value: large;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (min-width: 900px) {
            @content;
        }
    }
    
    $value: medium;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (max-width: 899px) and (min-width: 750px) {
            @content;
        }
    }
    
    $value: small;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (max-width: 749px) {
            @content;
        }
    }
}

これで、@include media(指定サイズコンマ区切り){}で入れ子にすることで簡単にレスポンシブデザインのCSSが出力できる。

HTMLの上部には以下のIE互換表示対策とviewportの設定をしておくとよい。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

サンプルコード

@mixin media($a: false, $b: false, $c: false){
    $value: large;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (min-width: 900px) {
            @content;
        }
    }
    
    $value: medium;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (max-width: 899px) and (min-width: 750px) {
            @content;
        }
    }
    
    $value: small;
    @if($a == $value or $b == $value or $c == $value){
        @media only screen and (max-width: 749px) {
            @content;
        }
    }
}


ul{
    li{
        color: #000000;
        @include media(large, medium){
            display: inline-block;
        }
        @include media(small){
            display: block;
        }
    }
}

上のSassコードをコンパイルすると

ul li {
  color: #000000;
}

@media only screen and (min-width: 900px) {
  ul li {
    display: inline-block;
  }
}

@media only screen and (max-width: 899px) and (min-width: 750px) {
  ul li {
    display: inline-block;
  }
}

@media only screen and (max-width: 749px) {
  ul li {
    display: block;
  }
}

このようなCSSが吐き出される。

参考

• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Including_a_Mixin___include__including_a_mixin
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Defining_a_Mixin___mixin__defining_a_mixin
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_if
• https://medium.com/@cazuki/レスポンシブデザインするならsassが便利だよ-2a9d9072b2e8