Sassはそのままではブラウザから読み込まれないので、コンパイルしてCSSに変換する必要があります。
ここでは、Gulpというタスクランナーを使って、SassをコンパイルしてCSSにする方法を解説します。

Node.jsのインストール

GulpはNode.js上で動作するため、Node.jsをインストールする必要があります。
Node.jsをインストールする方法には、大きく分けて二つの方法があります。

インストーラーからインストールする

一つ目は、インストーラーを使ってインストールする方法です。
公式サイトから、最新版のインストーラーをダウンロードしてきて、実行するだけですので、とても簡単にできます。

Node.js 公式サイト

nodebrewでバージョン管理をする （mac環境のみ）

インストーラーを使う方法は簡単ですが、バージョン管理がしにくいため、Node.jsのバージョンが上がったり、開発チーム内でバージョンを揃えたりしたい場合には不向きです。
このような場合には、Node.jsのバージョン管理システムである、nodebrewを使ってインストールしましょう。
こちらのサイトのREADMEに沿ってインストールしていきます。
黒い画面に慣れていなくても、基本的に順番にコマンドを打っていけば大丈夫ですので、頑張りましょう。

nodebrew

curlコマンドでnodebrew本体をインストールしたら、PATHを通します。
.bash_profileに下記を書き込んで保存します。

次に、下のコマンドで利用できるNode.jsのバージョンを確認します。

コマンドを打つと、使えるNode.jsの一覧が表示されますので、その中に最新版のバージョンがあることを確認します。
2018年2月15日現在では、安定版の最新がv8.9.4ですので、v8.9.4を下のコマンドでインストールします。

「Installed successfully」と表示されたら、Node.jsのインストールは成功です。
次のコマンドで、インストールされたNode.jsのバージョンを確認します。

「current」は現在使用しているNode.jsのバージョンを表します。
まだ、インストールしただけで、使うバージョンを指定していないので、「none」となっています。
次のコマンドで、使うバージョンを設定します。
使用するバージョンを変更したい場合も、次のコマンドを使用します。

Node.jsのバージョンを確認します。

設定したバージョンが表示されれば、完了です。

Gulpのインストール

Gulpをインストールします。
GulpはNode.jsのパッケージ管理システムである、npmを使ってインストールします。
Gulpは「gulp-cli」と「gulp」の二つのパッケージをインストールする必要があります。
「gulp-cli」はPCで共通の環境にインストールするため、「–global」オプションをつけてインストールします。

次に、「gulp」は作業ディレクトリ配下のローカルにインストールします。
npmで初めてローカルにインストールする場合には、npmのバッケージを管理するファイルを作成するために、次のコマンドを実行します。

対話形式でファイルが作成されるので、順番に項目を入力していきます。
特に設定が必要なければ、デフォルトのままで、Enterだけ押していけば大丈夫です。
最終的に「package.json」という、JSONファイルが作成されて、ここにインストールしたパッケージの種類とバージョンが記録されます。

それでは、次のコマンドで「gulp」をインストールします。
「–save-dev」オプションは、package.jsonに開発用のパッケージとして、情報を記録するオプションです。

以上で、gulpのインストールは完了です。

gulp-sassのインストール

GulpでSassをコンパイルするためのパッケージ、「gulp-sass」をインストールします。
インストール方法は「gulp」を同じです。

Gulpタスクの作成と実行

Sassをコンパイルするための、Gulpタスクを作成します。
Gulpのタスクは、「gulpfile.js」というファイルに、javascriptで記述します。

gulpfile.jsの作成

Sassをビルドするための、最低限のタスクは下記の通りです。
「sass」と「watch」というタスクを定義しています。

「sass」は、「/_src/sass/」ディレクトリ配下の「.scss」という拡張子のファイルをコンパイルして、「css」というディレクトリに、CSSファイルを生成します。

「watch」は、「scss」ファイルを監視して、ファイルに更新があれば自動的に「sass」タスクを実行して、Sassをコンパイルします。

そして、デフォルトタスクに「watch」を指定しています。

Gulpタスクの実行

Gulpタスクを実行するには、gulpfile.jsのあるディレクトリに移動して、下記のコマンドを実行します。

これで、Gulpのデフォルトタスクが実行されます。
上記のgulpfile.jsでは、「watch」がデフォルトタスクでしたので、「watch」が実行されます。
「sass」タスクを実行したい場合は、次のようにします。

開発中は、「watch」タスクを実行しておくことで、SCSSファイルを保存するたびに、Sassがコンパイルされ、CSSファイルが生成されるようになります。