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

Ayame

7年前

レスポンシブデザインのページをフレームワークとか一切使わずに作るとき、@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が吐き出される。

環境

実装

サンプルコード

参考