レスポンシブで中規模サイトを構築する場合のSASSの使い方

SASSの存在をしってから通常のCSSでのコーディングは殆ど行っていません。ちょい下準備が必要ですが、そこにかかる手間よりSASSが無いコーディングの方が時間がかかっていまいます。それほどまでにSASSは便利なのです。

個人的にはレスポンシブ案件の時こそSASSのが大活躍だと思っています。そんな僕のレスポンシブで中規模のサイトを構築する際のSASSの使い方をご紹介します。

だんだんコンパイルが遅くなってくる

SASSはコンパイラ型で記述したCSSはコンパイル後CSSファイルに出力されます。そして記述する量が増えるとコンパイルがだんだん遅くなってきて、それだけでイラッとしてしまいます。

そんな時はSCSSファイルを分割すると良いかもしれません。

@importでファイルを分割

僕の環境ではCSSが7000行あたりになるとコンパイルに6秒〜かかってしまいます。そのファイルを分割すると3秒後半〜ぐらいまでコンパイル時間が短縮できたので、それからはSCSSファイルは分割するのを癖付けています。

分割したSCSSファイルの先頭に_(アンダースコア)をつけると直接コンパイルされずに別のSCSSファイルで集約して読み込むことができます。

SCSSファイルの分割例

• _mixin.scss（mixinファイル）
• _frame.scss（サイトフレームのコーディング）
• _system.scss（動的コンテンツ仕組みのコーディング）
• _top.scss（トップページ）
• _contents.scss（下層ページ）
• _form.scss（フォーム系）
• _common.scss（共通の装飾）

僕は上記のようにSCSSファイルを分割しています。更新する箇所のSCSSって結構限られているので、今のとことこの分割で不便は感じておりません。

レスポンシブに対応してミックスインを呼び出す。

分割したファイルをブレイクポイントごとに呼び出すとレスポンシブのコーディング時、更に便利になります。

僕は上記で分割したファイルをstyles.scssファイルにブレイクポイント毎に分けて集約して呼び出しています。

@charset "UTF-8";
$type: common phone tablet screen;

$type: common;
    @import "mixin";
    @import "frame";
    @import "system";
    @import "top";
    @import "contents";
    @import "form";
    @import "common";
    
@media only screen and (max-width:667px) {
    $type: phone;
    @import "mixin";
    @import "frame";
    @import "system";
    @import "top";
    @import "contents";
    @import "form";
    @import "common";
}

@media only screen and (min-width:668px) and (max-width:1119px) {
    $type: tablet;
    @import "mixin";
    @import "frame";
    @import "system";
    @import "top";
    @import "contents";
    @import "form";
    @import "common";
}

@media only screen and (min-width:1120px) {
    $type: screen;
    @import "mixin";
    @import "frame";
    @import "system";
    @import "top";
    @import "contents";
    @import "form";
    @import "common";
}

上記のようにブレイクポイント毎に@importで呼び出すと、レスポンシブコーディングが以下のような記述で行えます。以下は_frame.scssの記述例です。

body{
    @if $type == common{
        font-family: 'Lato', '游ゴシック',YuGothic, sans-serif;
        font-weight: normal;
        color:#555;
        text-align: center;
    }
    @if $type == tablet{
        font-size: 1.3rem;
    }
    @if $type == phone{
        font-size: 1.3rem;
    }
    @if $type == screen{
        font-size: 13px;
    }
}

ブレイクポイント毎に記述を分けなくてもセレクタ内でブレイクポイント毎の記述が行えます。

この記法の欠点はブレイクポイントが増えれば増えるほどコンパイルに時間がかかってしまうことです。

SCSSファイルを分割するメリット

SCSSファイルを分割することによりコンパイルが速くなり、ブレイクポイント毎に、@importで呼び出すことによりレスポンシブの記述も楽になります。

その他にも複数人でコーディングする際もSCSSファイルを分割していると後々の集約が楽で良い感じです。