Sassを始めよう:その1[導入]

はじめに

今回は、Sassの導入をなるべく分かりやすく紹介していこうと思います。

環境

• macOS Sierra 10.12.3

導入

1. Terminal.appを開こう

今回はCUIで操作をしていきますので、Terminal.appを開きましょう。
ここで躓く人はIT機器を全部売って田舎へ帰ってください。

2. Homebrewのインストール

Homebrewのインストールを行います。すでにインストール済みの人は飛ばして構いません。

まずはHomebrewのHPにアクセスして、真ん中あたりに出てきたコマンドをコピー、Terminal.appにペーストして実行しましょう。
公式ページ: https://brew.sh/index_ja.html

こんな感じのコマンドがコピーできます。(下記のコマンドは投稿時点での最新になります。)

Terminal.app

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

エラーを吐かなければ成功ですので次に進みましょう。

Permissionがなんちゃらというエラーを吐いた場合、

Terminal.app

sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

このようにはじめに"sudo"を付加して実行してください。パスワードを聞かれますが、お使いのPCのパスワードです。

3. Rubyをインストールする

Rubyは先ほどインストールしたHomebrewを使ってインストールします。2と同じく、既にインストールしている方はスルーしてください。

Terminal.app

brew install ruby

上記のコマンドをTerminal.appで実行します。特にエラーを吐かなければインストール成功です。

2と同じく、Permissionなんちゃらと言われた場合、sudoを付加しましょう。

4. Sassをインストールする。

最後はSassをインストールしましょう。
Sassというか、Sassファイル(.css)を.CSSファイル(.css)に変換するための機能です。
既にインストールしている方はこのページをそっ閉じしてください。

Terminal.app

gem install sass

これでエラーを吐かなければ導入は終了です。

Permissionなんちゃらはsudoをつけて解決させましょう。

5. 確認

今回の記事を見て、導入1から実行している人は特に問題なく導入が完了しているはずですが、1,2をすっ飛ばしている人は途中でつまづいている可能性があります。
インストールがどうしてもうまくいかない方は、homebrewやrubyを更新して見てください。だいたい解決します。
それでも動かなかった場合は、コメントにでも書いておくと返信するかもしれないです。

Sassに触れる

みなさんとっととSassを触りたいかと思いますので、早速使って見ましょう。
といきたいところですが、今回は導入回ですのでちょっとした触りまで。

とりあえず何か書こう

適当なディレクトリに入って、test.scssファイルを作りましょう。

test.scss

.sample {
  margin: 10px;
}

こんな感じで記述します。

次にTerminal.appから、test.scssのあるディレクトリにアクセスして、

Terminal.app

sass test.scss:test.css

と入力して実行しましょう。

すると、test.scssと同じ階層にtest.cssが生成されます。

test.css

.sample {
  margin: 10px;
}

こんな感じになっていれば成功。簡単ですね。

同一階層に.sass-cacheフォルダとsourcemapファイルが生成されていますが、無視していいです。

最後に

導入お疲れ様でした。

今回の導入だけ見ても「Sassの何がいいんだよ...」と思ってしまうでしょう。
ですので、その辺は後々説明していきたいと思います。

次回は「Sassを活用してみよう」的なことをやっていこうかと思います。