macOS SierraにSASS環境を作るメモ

web

SASS(サース)とは

Syntactically Awesome Stylesheetsの頭文字で「いい感じの構文で書けるスタイルシート」的な意味です。たぶん。
読み方はサスじゃなくてサースみたいなので注意しよう!!!!!
詳細はshikaさんのこの記事がとてもわかり易い。
Sassってなに?だった私がSassの使い方を解説してみた

SASSをインストールする

SASSはインストーラを使わず、ターミナルでコマンドを使用してインストールします。
まずはターミナルを開き、以下コマンドを入力しましょう。
※ $は入力しません

$ gem install sass

このコマンドだとエラーが出ることがある。
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
英語で小難しい雰囲気ですが、要は「今の権限じゃディレクトリの書き換えができないよ」ということ。
そんな時は以下コマンドを使いましょう。

$ sudo gem install sass

頭にsudoを足します。これによりインストールする権限を与えています。
コマンドを実行するとパスワードを聞かれるので、アカウントのパスワードを入力します。
しばらく待つとずらずらっと文字列が表示されたのち、インストールが完了します。

$ sudo gem install sass
Password:
Fetching: rb-fsevent-0.10.2.gem (100%)7
Successfully installed rb-fsevent-0.10.2
Fetching: ffi-1.9.18.gem (100%)
Building native extensions.  This could take a while...
Successfully installed ffi-1.9.18
Fetching: rb-inotify-0.9.10.gem (100%)
Successfully installed rb-inotify-0.9.10
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.1.gem (100%)
Successfully installed sass-3.5.1
Parsing documentation for rb-fsevent-0.10.2
Installing ri documentation for rb-fsevent-0.10.2
Parsing documentation for ffi-1.9.18
Installing ri documentation for ffi-1.9.18
Parsing documentation for rb-inotify-0.9.10
Installing ri documentation for rb-inotify-0.9.10
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.5.1
Installing ri documentation for sass-3.5.1
5 gems installed

問題なくインストール出来たかを確認するにはこのコマンドを使用します。

$ sass --version

インストールされているSASSのバージョンをチェックするコマンドです。
インストールできていれば以下のように表示されます。

$ sass --version
Sass 3.5.1 (Bleeding Edge)

これでSASSのインストールは完了です。
あとはGlupなどのタスク自動化ツールなどを導入し、快適フロントエンド生活をエンジョイ!!!!!!