Node.jsを使ってSASSを始めよう!【使って覚えるSASS入門】

Node.jsを使ってSASSを始めよう!【使って覚えるSASS入門】

【使って覚えるSASS入門】シリーズでは、SASS入門者に向けたチュートリアルになっています。
「なんとなくSASSを使ってるけど、いちから学んでみたい!」
「SASSを使ってみたいけど、漠然としていてよく分からない。。。」
「SASSって食べ物?おいしいの?」
という方は、ぜひ参考にしてみてください!!

「SASSの使い方は分かるけど、実践で上手くいかない・・・」という方は、後日公開する【作って覚えるSASS実践】シリーズをご期待ください!!

SASSを使える環境を作ってみよう!

さっそく、SASSを使える環境を整えていきましょう!
第1回では、実際にSASSファイルをCSSファイルに変換するところまでやっていきます!!

SASSを導入するには、下のような手順をやっていけばOKです。

  • Node.jsのインストール(初回のみ)
  • npm を使ってプロジェクトを生成
  • npm でSASSをインストール

1つ目は、一度インストールしてしまえば、継続して使えます。
一緒に読み進めながらやっていきましょう!

2つ目以降は、プロジェクトごとに作業する必要があるので、理想は覚えた方がいいですね。
ただ、1回で覚えるのは難しいので、いざというときのために、ぜひこのサイトをお気に入りに追加してくださいね!笑

まずはNode.jsを準備しよう!(初回のみ)

Node.jsとは、サーバーサイドのプログラミング言語です。
ただ、今回はNode.js自体は使いません。

今回はNode.jsに付属してくるnpm(Node Package Manager)というソフトウェアを使用します。

では、実際にインストールしてみましょう!

Node.jsの公式ページからNode.jsをインストールしていきます。

インストール用のファイルをダウロードするためのページに飛ぶので、そこからダウンロードします。
※WindowsやMacなどのOSによって、若干表示が異なりますが、同じように進めることが出来ます。

今回は、SASSが使えればOKなので左側の「推奨版」の方を選択します。
※最新の機能を使いたい場合以外は「推奨版」でOKです。

ボタンをクリックすると、インストール用のファイルがダウンロードされるかと思います。
そのファイルを実行します。

実行すると次のような画面が出てきます。
ここは「Next」をクリックします

それ以降は、画面の指示に従ってインストールを完了させてください!

インストールが完了したら「Finish」をクリックして完了させましょう!

インストールが成功しているか確認

最後にインストールが成功しているかの確認をします!

まずは、ご自身のPCに搭載されているターミナルを開きます。
Windowsの場合は、Windows PowerShellを紹介している記事があるのでこちらを参考に開いてみてください!
MacやLinuxの場合は、アプリケーションから「端末」を検索して開いてください!

無事に開けたら、下のコマンドを入力してエンターを押してみましょう!

npm -version

下の画像のようなテキストが出力されれば、インストールが成功です!!
※環境によっては少し異なるかも

このターミナルは、しばらく使うので出したままにしてくださいね!

もし、エラーなどが出ていたら、もう一度インストールをやり直してみてください。

プロジェクトを作ってみよう!

Node.jsのインストールが完了したら、実際にプロジェクトを作ってみます。

先ほどのターミナルを立ち上げます。
そして、下のコマンドでプロジェクトのファイルを作成します。

mkdir SassSample

「SassSample」のところは好きな名前でOKです。

そしたら、

cd SassSample

このコマンドで先ほど作成したフォルダに移動します。

次に、インストールした「npm」を使って、プロジェクトを作ります。

npm init

すると、下のように質問されます。

ここは脳死させて、エンター連打で大丈夫です!保証します。
※将来的には理解できてるのが好ましいですが。。

ls

フォルダの中身を確認する、このコマンドを実行してみましょう。

すると、「package.json」なるものが自動的に生成されていると思います。

これでプロジェクトの作成が完了しました!

エラーが出た場合は、焦らずにエラーを確認してみましょう!
良くあるのがスペルミスですね。

もし、うまく行かない場合はNode.jsのインストールから試してみてください!

npmを使ってSASSをインストール!

ここまで、順調に来た方はおめでとうございます!!
今日はシャンパンを開けましょう!(嘘です)

では、さっそくSASSをインストールしましょう!
おそらく今開いている、ターミナルを引き続き使います。

このターミナルに

npm install --dev-save sass

と打ち込んで実行します。

すると、インストールが始まるので、しばしティータイム。(ソッコーで終わりますw)

インストールが終わるまで(ソッコーで終わります)先ほどのコマンドの解説を。

  • install
    文字通り、インストールを開始する命令です。
    「i」で省略することもできます。
  • --dev-save
    開発用かどうかの指定です。この場合は開発用になります。
    「-D」で省略することもできます。
  • sass
    インストールするソフトウェアを指定しています。
    半角スペースで区切ることで複数のソフトウェアを一度にインストールできます。

さて、インストールが終わったでしょうか?
インストールが終わるとこんな感じの画面になります。

これでSASSのインストールが完了しました!

あ、インストールが終わってもターミナルは閉じないでくださいね!

もし、エラーが出ていたらスペルミスがないかなどチェックしましょう。
あと、ネット回線も必要になるのでお忘れなく!

実際に実行してみよう!

ここまでお疲れ様でした!!
ラスト、実際にSASSを書いて、CSSに変換してみましょう!

まずはSASSファイルを用意します。
今回はテストのため、使い捨て前提のファイルを作成します。

プロジェクトフォルダの「SassSample」の中に「style.scss」という空のファイルを作ります。
そのファイルの中に第0回で説明したコードを書いてみましょう。

$purple: #e2d3ff;

.icon-color {
background-color: $purple;
}

.text-color {
color: $purple;
}

.border-color {
border-color: $purple;
}

そしたら、コマンドに戻ります。
次のコマンドを唱えるだけで、即変換出来ちゃいます!

sass style.scss style.css

「style.scss」の部分は用意したSASSファイルになります。
「style.css」の部分は変換後に生成されるCSSファイルになります。
今回はこのファイル名ですが、別の名前にすることも可能です!

さて、プロジェクトフォルダの中に「style.css」が生成されているので、中身を確認してみると・・・。

.icon-color {
  background-color: #e2d3ff;
}

.text-color {
  color: #e2d3ff;
}

.border-color {
  border-color: #e2d3ff;
}

/*# sourceMappingURL=style.css.map */

おめでとうございます!!
無事に変換することが出来ましたね!

次回の第2回では、このコマンド周りの解説をしていきたいと思います!

それでは、最後までありがとうございました!!

まとめ

SASSのインストール手順

  • Node.jsをインストール(初回のみ)
  • 「npm init」でプロジェクトを作成
  • 「npm install --dev-save sass」でSASSをインストール
  • 「sass style.scss style.css」でSASS用ファイルをCSSファイルに変換