Sassの導入方法から使い方まで、初心者にも分かるように解説

こんなニーズに答える記事になります。

本記事では、Sassの導入方法と使い方について解説しています。初心者向けに解説しているので難しい言葉は排除しています、「他記事を読んでもよく分からずSassを諦めた」なんて方にオススメです。

「Sassを使えば世界が変わる、ワンランク上のコーディングへ」

Sassの導入方法「３ステップで解説」

Sassを学ぶためにはまず環境を整える必要があります、一見ややこしそうですが導入方法は簡単です。

1. Sassのベースを作る（rubyを用意する）
2. 実際にSassを使う環境を作る（Koalaを用意する）

細かい部分を除けばSassを導入するために必要なことは上記２つのみです。

それぞれダウンロードするだけですし、Macユーザーに関しては「Sassのベースを作る」は無視してOK（Macには元々入っているから）

基本的にはダウンロードしてセットアップしてもらうだけです。

それぞれ解説します。

ステップ１：rubyをダウンロード・インストール

ここからRubyをダウンロード
※Macユーザーは不要

ダウンロードしたらセットアップしておいてください、それで準備完了です。

ステップ２：Koalaをダウンロード・インストール

ここからKoalaをダウンロード

Sassを使うにはこれが必要になります、MacでもWindowsでも使えるのでダウンロードしたらセットアップしておいてください。

ここまで出来ればSassを使える環境になっています。

ステップ３：Koalaの設定

Sassの導入に関してはステップ２で完了していますが、実際に使う事を考えるとある程度設定しておいた方が便利かと思います。

先ほど用意した「Koala」を起動してください、起動後画面左上にある歯車のようなアイコンをクリックしておいてください。

Koalaの日本語化

設定画面を開くと言語選択できるボックスがあると思うの「日本語」を選択してください。

チェックボックスの設定に関しては任意で大丈夫です、上記は私の設定になります、よければ参考にしてください。

最後に右下にあるOKボタンを押せば設定完了です、反映されない場合はKoalaを再起動してください。

Sassの設定（Koala）

設定画面のSassタブから設定を行います。

上記を参考に設定して頂ければ大丈夫です、他の設定項目に関しては今は必要ありません、これだけで普通に使えます。

これでSassを使う準備は整いました。

Sassの使い方「Koalaの使いこなし術」

実際にSassを使ってみましょう。

その１：Sassファイルの用意

まずSassフォルダを用意しましょう（名前は自由です、ちなみにsassと付けるのが一般的です）

用意したフォルダ（ここでは「sass」）の中に[style.scss]というファイルを作成してください。

下記のような感じになればOKです。

• sass（フォルダ）
• sass/style.scss（ファイル）

その２：Koalaに紐づける

Sassを使うには対象のフォルダとKoalaを関連付ける必要があります。

これについては、先ほど用意したフォルダをKoalaにドラッグ＆ドロップするだけでOKです。

※Koalaの画面左上にある「+」からフォルダを関連付けることもできます。

自動コンパイルの設定

関連付けされたsassファイルをクリックし「自動コンパイル」にチェックを入れておく。

その３：編集とコンパイル

sassフォルダを関連付けることができたら、実際にSassでコードを書いてみましょう。

例えば下記のようなCSSコードがあるとします。

body {
  background-color: red;
}

body .wrap {
  background-color: blue;
}

上記をSass（scss）で書いてみるとどうなるか、先ほど作成した[style.scss]を編集します。

body {
  background-color: red;

  .wrap {
    background-color: blue;
  }
}

こんな感じになります、入れ子で記述することでクラス指定が楽になり、可読性も上がることが分かります。

これを保存してみると、、、

同じ場所に[style.css]が自動で作成されているはずです。

サイトで読み込ませるファイルはこのcssファイルです、sassファイルを読み込ませるわけではありません。

まとめ

Sassを使う時は以下の手順で行う

1. Koalaを起動する
2. style.scssが入っているフォルダをKoalaと関連付けする
3. style.scssにコードを記述する
4. 保存すると自動でstyle.cssが作成される（更新される）

簡単ですね。

よくある質問

SassやKoalaでよくある質問についても回答しておこうかと思います。

Koalaに関連付けするのめんどくさい

sassとscssどっちで書いた方がいい？

質問があれば回答しますのでどうぞ。

終わりに：Sassがあると作業分担が楽

いかがでしたでしょうか。

ぶっちゃけcssでいいと思った方もいるとは思いますが、Sassは使いこなすとかなり便利なので色々試してみることをオススメします。

Sassを使うと分担作業が楽になったりするので、複数人でCSSファイルを共有する時なんかはかなり重宝します。

他にはメディアクエリの指定が超絶楽になります、これについては【コピペOK】Sassで簡単にメディアクエリを使用する方法で解説してます。

最初はややこしく感じるかもしれませんがすぐに慣れます、是非試してみて下さい。

以上になります。