Sass導入でコーディング速度２倍？！導入手順と応用まとめ

2021年6月18日

こんにちわ、最近時短にハマっている、いけもんです。

フロントエンジニアにとってのテーマは「作業の効率化」と「質の向上」と思っています。
良いものを早く提供する。どっかの牛丼屋みたいなスタンスですが、今回ご紹介するSassは作業時間を短縮し、かつ質も向上できるという技術です。

「Sass」という言葉は聞いたことがあるけど、実務で使ったことがないという方、結構いるのではないでしょうか？
今回はCSSの拡張機能であるSassをWordPressを使って導入の段階までお伝えします。

この記事の目次（もくじ）

1 Sassって何？
2 Sassを導入しよう！

Sassって何？

Sassとは「Syntactically Awesome Style Sheets」の略。
CSSでは出来ない「入れ子」「変数」など多彩な機能が使えるようになる人気のメタ言語です。
「CSSをほぼマスターした！」という方は、次のステップアップとして是非取り入れてみてください。
実際に導入してみて、２倍くらい早くなりました！

Sassを導入しよう！

「Ruby」をインストール

Sassを動かすには、「Ruby」が必要なのでインストールしましょう。

Rubyダウンロードはこちら →

Ruby（ルビー）は、まつもとゆきひろ（通称 Matz）により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。また日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった[規格に認証された事例となった

難しいですね。今回はSassのインストールのためにRubyが必要なだけなので、深く勉強する必要はありません。

「Sass」をインストール

Sassのインストールはコマンドプロンプトから行います。
黒い画面の操作は苦手意識がある方が多いと思いますが、簡単な操作なら簡単なのでこの機会に覚えましょう！

スタート　→　アクセサリ　→　コマンドプロンプトを起動
「gem install sass」と入力してEnter
インストール完了

Sassファイルを作成

「〇〇.scss」というファイル形式でSassファイルを作成しておいてください。
ファイル階層はどこでもいいですが、今回は「test.scss」を以下の階層に作った提で進めていきます。）
wp-content/themes/ant/test.scss

Sassのコンパイル方法を決める

Sassを使うには「○○.scss」というファイル名でコードを書いていくのですが、このままではプラウザがCSSとして読み込んでくれません。
SassからCSSに変換（コンパイル）する必要があります。
コンパイルの方法は大きく分けて以下３種類ありますので、自分に合ったやり方を導入してください。

コマンドプロンプトで毎回手動でコンパイルする

この方法は実用的ではないので、今回は省略します。

Sassコンパイラー「Koala」の導入

毎回手動でコマンドプロンプトを打つなんて、余計に時間がかかりますよね･･･。
そんなときは、自動でコンパイルをしてくれる「Koala」というソフトを使いましょう！

「Koala」ダウンロードはこちら

①まずSassの入っているフォルダ階層を指定
②リストにSassファイルが表示されるので選択
③変換方法を指定（CSSを圧縮して１行にするなど色々ありますが、とりあえず「nested」で大丈夫です）
④実行
⑤変換先のCSSファイルを指定

以上でSassをCSSに変換する設定が完了です。
Sassのファイルを編集して保存すれば、自動でCSSに変換しくれる処理をしてくれるので、Sassを使うときは毎回「Koala」を起動させておいてください。

GulpでSassコンパイル自動化

Gulpを導入しているのであれば、一番オススメなのがこの方法！
Gulpのタスクに「Sassコンパイル自動化」の処理を書いておけば自動で処理をしてくれます。
導入方法は下記記事を参考にしてください。

Gulpで作業効率2倍！導入から応用までの手順を総まとめ

実際にSassを使ってみよう！

導入の下準備はここまでで完了。さっそく先ほど作ったSassファイルにコードを書いて使ってみましょう！

Sassの基本機能「入れ子」について

#sidebar .sub-box h1{
  font-size: 16px;
}
#sidebar .sub-box h2{
  font-size: 12px;
}

従来のCSSではこのように親要素を何度も書く必要がありました。

#sidebar{
  .sub-box{
    h1{
      font-size: 16px;
    }
    h2{
      font-size: 12px;
    }
  }
}

SassではCSSを階層分けして入れ子にできるので、毎回親要素を書く必要がなくなりました！
この例ではまだメリットが分かりにくいと思いますが、書く量が増えたとき、その効率性とコードの見やすさに驚くことでしょう。

他にもプログラミング言語のように変数を作れたり、かなりの便利機能が沢山あります。
今回は導入編ですので、他の機能は次回に詳しく書いていきますね。