WEB制作において、CSSについて調べているとSass（SCSS「以下Sass」）について紹介されている記事をよく目にします。
私自身もSassについては以前から知っておりましたが、なかなか導入には至りませんでした。
というのも、以前に導入を試みた際、うまくいかず途中で心が折れてしまった経緯があり、導入を先送りにしてきておりました。
そんな状況を打破するべく再度導入を試み、今回はうまく導入することができたので、同じようにSass導入に苦戦している方のお役に立てればと思い、私がつまずいた点をまとめておこうと思います。

導入のハードルが高そうなSassですが、スタイルを書く際の作業効率・メンテナンス性を上げる事が出来るので導入するメリットは大きいと思います。
今回はそんな導入メリットの大きい「Sass」についてご紹介していきたいと思うのですが、上述したとおり、今回はSassの仕様紹介ではなくMacでの導入方法を中心にご紹介したいと思います。

「Sass」とは

「Sass」とは「Syntactically Awesome StyleSheet」の略で、簡単に言うとCSSを拡張して見やすく、書きやすくしたスタイルシートです。
特徴としては、

• 入れ子（ネスト）の使用が可能
• 変数を利用できる
• 算術演算が可能
• 関数を使用できる
• 複数のCSS定義の結合（ミックスイン）
• 外部ファイルの読み込み

などがあり、CSSにはない機能を利用することができます。
CSSよりプログラミング言語に近い感覚で作業が行えるので、メンテナンス性や作業効率を上げることができます。

 

Sass導入手順

それでは、導入手順をご紹介していましょう！

Sassを使うまでに必要なもの（Mac）

• XcodeのCommand Line Tools
• homebrew
• rbenv
• Ruby

それぞれの関係性

1. 「XcodeのCommand Line Tools」は「homebrew」を使うために必要。
2. 「homebrew」は「rbenv」をインストールするため必要。
3. 「rbenv」は「Ruby」を使うために必要。
   ※macの中には「Ruby」が初期で入っていますが、バージョン管理を行うために「rbenv」が必要。

上記の関係性を知っておくとより仕組みを理解できると思います。

 

1. XcodeのCommand Line Tools

「homebrew」を使うには「XcodeのCommand Line Tools」が必要です。

「Command Line Tools」はMacで利用できるコマンドラインツールです。そしてコマンドラインツールとは、コマンドを入力して操作するアプリケーション、CUI(キャラクターユーザーインターフェース）のことです。

Xcodeをインストールもしくは、Command Line Toolsを単独でインストール。

Xcodeインストールコマンド（ターミナルで実行）

 

2. homebrew

「rbenv」をインストールするためには「homebrew」が必要です。

「homebrew（ホームブルー）」は、macOSオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつです。

homebrewのインストール

こちらはまず、ターミナルにて　brew -v　と打ち込み、「brew: command not found」と表示された場合はインストールする必要があります。

公式サイトで最新を確認

こちらをそのままコピーしてターミナルに打ち込むとインストールできます。

3. rbenv

「Ruby」を使うには「rbenv」が必要。macの中には「Ruby」が初期で入っています。しかしバージョン管理を行うためには「rbenv」が必要。
「rbenv」は、複数の「Ruby」のバージョンを管理し、プロジェクトごとに「Ruby」のバージョンを指定して使うことを可能としてくれるツールです。

rbenvをインストール

まず　rbenv -v　と打ち込んでみる。そして「rbenv: command not found」と表示された場合はインストールをする。

上記をコピーしてそのままターミナルへ
インストール後再度 rbenv -v でインストール出来ているか確認。

 

実行環境を確認しインストールした「rbenv」の設定をしておきます。
次のコマンドを実行

 

実行結果が /bin/bash の場合、以下のコマンドを実行してください。

 

実行結果が /bin/zsh の場合、以下のコマンドを実行してください。

これで「rbenv」の設定は完了です。

 

4. Ruby

インストールした「rbenv」を用いて「Ruby」をインストール
「rbenv」では複数のバージョンの「Ruby」を使用することができます。ではどのようなバージョンの「Ruby」がインストールできるか確認してみましょう。

以下のコマンドをターミナルで実行。

 

すると、インストールすることが可能な「Ruby」のバージョン一覧が表示されます。
使用したいバージョンを選んでインストール。

 

インストールが終わったら、以下のコマンドを実行。
現在インストールされている「Ruby」を一覧で確認することができます。

 

インストールしたバージョンの「Ruby」を使用するように設定を変更。
以下のコマンドを実行してください。

 

設定されているかを以下のコマンドを実行して確認。

 

次にPATHの設定がちゃんとできているか確認。
どこの「Ruby」が呼ばれているかを確認してみます。
以下のコマンドを実行して下さい。

 

以下のようになっていれば成功です。

 

gemも同様に確認。以下のコマンドを実行して下さい。

 

以下のようになっていれば成功です。

 

5. gemのアップデート

Sassをインストールする前にgemというものをアップデートする必要があります。

※GemはRubyGemsが公開しているライブラリのこと。Gemを使うことで簡単に機能を実装できるメリットがありますが、バージョンによる相性問題や多用しすぎた場合の保守が大変になるというデメリットもあります。

 

これでgemのアップデートは完了です。

 

6. Sassをインストール

ここまでで準備は整ったので、最後に「Sass」をインストールします。
以下のコマンドでインストールを実行して下さい。

 

sass -v で無事にバージョンが確認されれば成功です。

 

7. Sassのアップデート

Sassのアップデートは以下のコマンドを実行して下さい。

 

 

まとめ

いかがでしたでしょうか。
「Sass」さえインストールすればすぐに使えると思われている方も多いのではないでしょうか。
元々の開発環境が整っていれば「Sass」のインストールのみで動く方もいるとは思いますが、これから開発環境を整えていかれる方で、「Sass」導入でつまづいている方は多いと思います。
そういう方に少しでもこの記事がお役にたてば幸いです。