macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

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

CSS プログラミング

Sassデビューしたいマン

Sassデビューしたいマン
「CSSにも慣れてきたんだけど、今ではSassを使うのが主流なんだよね?そこで、この機会にSassについて勉強しようと思う、ってことでSassの導入方法と使い方について初心者に分かるように教えてほしい。」

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

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

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

目次【本記事の内容】

スポンサードサーチ


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

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

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

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

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

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

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

それぞれ解説します。

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

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

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

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

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

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

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

ステップ3:Koalaの設定

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

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

Koalaの日本語化

Koalaの日本語化

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

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

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

Sassの設定(Koala)

Sassの設定(Koala)

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

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

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

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

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

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

その1:Sassファイルの用意

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

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

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

  • sass(フォルダ)
  • sass/style.scss(ファイル)

その2:Koalaに紐づける

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

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

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

自動コンパイルの設定

自動コンパイルの設定(Koala)

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

その3:編集とコンパイル

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.scssを保存するとstyle.cssファイルが自動生成される(更新される)

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

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

まとめ

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

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

簡単ですね。

よくある質問

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

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

回答:一度関連付けするだけで大丈夫です、解除したい場合はKoalaから削除すればOK。

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

回答:どちらでも大丈夫です。どちらかと言えばscss、直感的に書けるのでオススメです。

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

スポンサードサーチ


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

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

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

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

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

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

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

以上になります。