Sassなしでレスポンシブデザインのコーディングは苦行だと思う

Sassなしでレスポンシブデザインのコーディングは苦行だと思う

2021年5月25日
コーディング

「Sassなしでレスポンシブデザインのコーディングは苦行だと思う」

少し言い過ぎですかね？
でも、Sassでレスポンシブデザインのコーディングをしていると、Sassなしでのコーディングには戻れなくなると僕は思っています。
それくらいコーディングが楽になります。

SassはCSSのコーディングを色々と楽にしてくれますが、僕の場合は特にレスポンシブデザインのコーディングが楽になりました。

今回は、Sassでのレスポンシブデザインのコーディングにフォーカスして記事を書こうと思います。
レスポンシブデザインをコーディングする上で、少しはお役に立つと思うので最後まで読んでいただけると嬉しいです！

目次

Sassって何？

まずは「Sassって何？」という方のために、Sassについて簡単に説明します。

SassとはCSSを拡張するメタ言語です。

「ちょっと意味がわかんない」って感じですよね。
僕なりに噛み砕いて説明すると、CSSを楽に書けるようになる言語です！

例を挙げると、以下の様なCSSがあったとします。

.container {
  width: 960px;
}
.container .section {
  margin-bottom: 50px;
}
.container .section .title {
  font-size: 24px;
}

classを記述する際に結構コピペしないといけないですよね。
これをSassなら以下のように書けます。

.container {
  width: 960px;
  .section {
    margin-bottom: 50px;
    .title {
      font-size: 24px;
    }
  }
}

それぞれのclassを1回だけ書けば良くなります。
また、classを入れ子で記述できるので構造も理解しやすくなりますね。

ただし、HTMLからSassを読み込むことは出来ません。
最終的にはSassをCSSに変換し、CSSをHTMLに読み込むことになります。

Sassをインストールする

それでは、Sassの基本的な使い方を解説していきます。
まずはSassをインストールしましょう！

SassをインストールするためにはRubyが必要です。
なので、まずはRubyをインストールする必要がありますが、Macであればすでにインストールされているはずです。

ターミナルで以下のコマンドを実行してバージョン情報が表示されればインストール済みです。

$ ruby -v

Windowsをお使いの場合は、Rubyがインストールされていない可能性があります。
その場合はRubyの公式サイトからダウンロードできます。

Rubyがインストールされているのを確認したらSassをインストールします。
ターミナルで以下のコマンドを実行してください。

$ gem install sass

上記のコマンドでインストールできない場合は、「sudo」を追加してみてください。

$ sudo gem install sass

以下のコマンドを実行し、Sassのバージョン情報が表示されればインストール完了です。

$ sass -v

Sassの基本的な使い方

Sassを使う流れは以下のようになります。

  1. scssファイルにSassを記述
  2. scssファイルをcssファイルに変換

分かりやすいように、以下のディレクトリを想定して解説します。

root/
　├ index.html
　├ style.css
　└ style.scss

index.htmlでは以下のようにstyle.cssを読み込んでください。

<link rel="stylesheet" href="style.css">

それでは、Sassを書いてみましょう！
style.scssにSassでスタイルを記述します。

body {
  color: #000;
  line-height: 1.5;
  h1 {
    font-size: 24px;
    font-weight: bold;
  }
}

ターミナルで以下のコマンドを実行すると、style.scssがstyle.cssに変換されます。

$ sass style.scss:style.css --style expanded

style.cssの内容は以下の様になっていると思います。

body {
  color: #000;
  line-height: 1.5;
}
body h1 {
  font-size: 24px;
  font-weight: bold;
}

いつものCSSの形ですね！

watchコマンドを使うと、scssファイルに変更があったら自動でcssファイルに変更することが出来ます。
頻繁にscssファイルを編集する場合はこちらの方が楽です。

$ sass --watch style.scss:style.css --style expanded

以上がSassの基本的な使い方です。
次は僕がレスポンシブデザインをコーディングする際に使っているSassの書き方をご紹介します。

Sassでレスポンシブデザインをコーディングする

レスポンシブデザインをコーディングする場合、メディアクエリでデバイス毎のスタイルを書いていきます。

僕はモバイルファーストでスタイルを指定していくので、まずはモバイル用のスタイルを書き、タブレット用やPC用のスタイルで上書きしていきます。

/* モバイル用のスタイル */
h1 {
  font-size: 16px;
}

/* タブレット用のスタイル */
@media (min-width: 768px) {
  h1 {
    font-size: 20px;
  }
}

/* PC用のスタイル */
@media (min-width: 1200px) {
  h1 {
    font-size: 24px;
  }
}

それぞれのメディアクエリの記述場所が離れていると行ったり来たりするのが手間ですし、間違いの元にもなりますよね。
これがSassだと以下のように書くことが出来ます。

h1 {
  // モバイル用のスタイル
  font-size: 16px;

  // タブレット用のスタイル
  @media (min-width: 768px) {
    font-size: 20px;
  }

  // PC用のスタイル
  @media (min-width: 1200px) {
    font-size: 24px;
  }
}

h1の中にメディアクエリを記述し、デバイスごとに変えたい部分だけを上書きしていきます。

入れ子と組み合わせて以下のように書くことも可能です。

section {
  margin-bottom: 30px;
  padding: 30px;
  border-bottom: 1px solid #ccc;

  @media (min-width:768px) {
    margin-bottom: 60px;
  }

  @media (min-width:1200px) {
    margin-bottom: 90px;
  }

  h1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
  
    @media (min-width: 768px) {
      font-size: 20px;
    }
  
    @media (min-width: 1200px) {
      font-size: 24px;
    }
  }
}

このscssファイルをcssファイルに変換すると以下のようになります。

section {
  margin-bottom: 30px;
  padding: 30px;
  border-bottom: 1px solid #ccc;
}
@media (min-width: 768px) {
  section {
    margin-bottom: 60px;
  }
}
@media (min-width: 1200px) {
  section {
    margin-bottom: 90px;
  }
}
section h1 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 768px) {
  section h1 {
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  section h1 {
    font-size: 24px;
  }
}

慣れない間は見にくいと感じるかもしれませんが、慣れるとすごく楽ですよ！
メディアクエリ間を行き来する必要がなくなりますし、セレクタやクラスごとにメディアクエリで上書きしていくので、デバイスごとのスタイルの指定が把握しやすくなります。

ただ、この書き方にはデメリットがあります。
上記のCSSを見て分かる通り、メディアクエリが色々な箇所に分散してしまうんです。

このままでも特に問題はありませんが、何となくスマートではない気がします。
「どうしても気になる！」という僕と同類の方は、タスクランナーGulpを使うことで解決できます！

次はGulpでメディアクエリをまとめる方法を解説しますが、興味がない方はスルーしてOKです。

GulpでSassのメディアクエリをまとめる

さっそくSassのメディアクエリをGulpでまとめる方法を解説していきます。

「Gulpって何？」という方は以下の記事を参考にして、ぜひこの機会に導入してみてください。

Gulpってる？インストールから画像圧縮を自動化する方法を解説
Gulpってる？インストールから画像圧縮を自動化する方法を解説
Webサイトのコーディングって色々な作業が発生しますよね。HTMLやCSSを編集するたびにブラウザをリロードして確認したり、画像やファイルを圧縮したり、やること…
ryob.net

それでは、Gulpはインストール済みという前提で解説していきます。
せっかくなので、SassのコンパイルもGulpでやってみましょう！

先程と同様に以下のディレクトリ構造で解説します。

root/
　├ gulpfile.js ←新規で作成してください
　├ index.html
　├ package.json ←後述します
　├ style.css
　└ style.scss

以下のコマンドを実行してpackage.jsonを作成します。
プロジェクト名などを設定する質問が表示されますが、とりあえず全てreturnキーを押せばOKです。

$ npm init

次はGulpと必要なパッケージをインストールします。
Sassのコンパイルとメディアクエリをまとめるために必要なパッケージは以下の3つです。

  • gulp-sass
  • gulp-postcss
  • css-mqpacker

それぞれのパッケージについては以下の記事で解説しているので、興味がある方はぜひ読んでみてください！

Gulpのおすすめパッケージを紹介！Sassのコンパイルやブラウザのオートリロードなど
Gulpのおすすめパッケージを紹介！Sassのコンパイルやブラウザのオートリロードなど
みなさん、Gulpってますか？僕は毎日Gulpってます！ Gulpって色々な作業を自動化できるので本当に便利ですよね！今回は、僕が実際に使っているGulpのおす…
ryob.net

以下のコマンドでGulpとパッケージを一括でインストールしましょう！

$ npm install --save-dev gulp gulp-sass gulp-postcss css-mqpacker

パッケージをインストールしたらgulpfile.jsというファイルを作成します。
gulpfile.jsはGulpの処理を記述するファイルです。
以下のソースコードを記述してください。

const gulp = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const mqpacker = require("css-mqpacker");

// Sassのコンパイル＆メディアクエリをまとめる
function compileSass() {
  return gulp
    .src("./*.scss", { sourcemaps: true })
    .pipe(
      sass({
        outputStyle: "expanded",
      })
    )
    .on("error", sass.logError)
    .pipe(postcss([mqpacker()]))
    .pipe(gulp.dest("./", { sourcemaps: "./" }))
}

// scssファイルを監視
function watchFiles() {
  gulp.watch("./*.scss", compileSass);
}

// タスク化
exports.default = watchFiles;

そして以下のコマンドでGulpを実行します。

$ npx gulp

するとscssファイルの監視が始まります。
style.scssファイルに以下のソースコードを記述して保存してください。

section {
  margin-bottom: 30px;
  padding: 30px;
  border-bottom: 1px solid #ccc;

  @media (min-width:768px) {
    margin-bottom: 60px;
  }

  @media (min-width:1200px) {
    margin-bottom: 90px;
  }

  h1 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
  
    @media (min-width: 768px) {
      font-size: 20px;
    }
  
    @media (min-width: 1200px) {
      font-size: 24px;
    }
  }
}

自動的にstyle.scssがstyle.cssに変換されます。
Gulpを使う前と異なり、それぞれのメディアクエリがまとめて記述されていると思います。

section {
  margin-bottom: 30px;
  padding: 30px;
  border-bottom: 1px solid #ccc;
}

section h1 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

@media (min-width: 768px) {
  section {
    margin-bottom: 60px;
  }
  section h1 {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  section {
    margin-bottom: 90px;
  }
  section h1 {
    font-size: 24px;
  }
}

いい感じですね！

かなり見やすくなりましたし、メディアクエリの記述が減る分ファイル容量も軽くなります！

まとめ

Sassを使い始めると、便利すぎてSassなしでのコーディングには戻れなくなります。

今回はレスポンシブデザインのコーディングにフォーカスして使い方を解説しましたが、その他にも色々と便利な機能があります。
機会があれば、Sassの便利な使い方を解説する記事も書いてみようと思います！

まだSassを使ったことがない方、Sassを使っているけどレスポンシブデザインのコーディングに活かせていない方は、今回の記事でご紹介した方法をぜひ試してみてください！

もし分かりにくい所があるばあいは、お気軽にコメントください！
最後まで読んでいただきありがとうございました！