Sassを導入して効率良くコーディングをする準備

Sassってよく聞くけど何だろう？

Sassを覚えるともうCSSでコーディングしようとは思わなくなるほど便利なものなので、ぜひ習得しましょう。

Sassとは？

SassとはRuby製のCSSメタ言語・・・と言っても良く分からないと思います。

簡単に言ってしまえばCSSを効率的に書けるようになる言語だと思って下さい。

これは模写を1～2回やった後に習得することをおすすめします。

そうするとCSSより便利であることを実感できると思います。

Sassには記法が2種類あります。

Sassの記法がSCSSとSASS・・・かなりややこしいですね。

それぞれ拡張子も .scss .sass となります。

記法、つまり書き方が違うのですが、一般的にはSCSSが使われていると思います（自分もSCSSです）

なので特に会社のルールなどが無ければSCSSで覚えれば大丈夫かと思います。

書き方はCSSの延長線上にあるので、ある程度CSSを覚えてから始めるのがおススメです。

SassはRubyという言語が使われているため、まずRubyをインストールする必要があります。

Macには最初から入っているので不要ですが、Windowsには入っていません。

なのでWindowsではRubyをインストールする必要があるのですが・・・後述するKoalaというコンパイラを使ったらRubyをインストールしなくても大丈夫でした。

「Koalaを使えばWindowsでもRubyを入れる必要はない」という情報は散々ググっても1件しか見つからず、他のサイトは全てRubyをインストールせよと書いてあったので詳しい事は分かりませんが、Rubyを入れてない古めのパソコンでもSassは使えました。

もしWindowsでRuby入れずに使えなかったらRubyをインストールしてみて下さい。

コンパイラというのはSassをCSSに変換（コンパイル）するものです。

WebサイトはHTMLとCSSがあれば見れますが、HTMLとSassでは見れないのでSassはCSSに変換する必要があります。

それなら最初からCSSで書いた方が良さそうに見えますが、Sassの方が断然書きやすく管理しやすいのです。

なので導入に必要な物はKoalaというコンパイラだけですね（コンパイルする方法は他にもありますが、私はKoalaを使っています）

まずはここからKoalaをダウンロードしてインストールして下さい。

次に赤枠の設定から言語を日本語にしましょう（しなくても大丈夫ですが）

次に環境設定のSassを選択し、Source MapとAutoprefixにチェックを入れます。

Source MapにチェックするとデベロッパーツールでSourceタブを選択したときに、通常表示されないSassも表示されます。

Autoprefixはチェックを入れておくとベンダープレフィックスを自動で付けてくれます。

ベンダープレフィックスとは古いブラウザに対応させるためのもので、-webkit- や -ms- を自動で付けたり、不要なものを削除したりしてくれます。

最後のアウトプットスタイルは好みでいいと思いますが、expanded はCSSと同じ記述にしてくれるので少々重くなりますが見やすくなります。

逆に compressed はスペースなど取り除くので見にくくなりますが軽くなります。

使い方としては作成しているフォルダをドラッグ&ドロップします（ここは日本語化しても英語ですね）

するとstyle.scssのファイルがあるので、これをクリックします。

そして右下のコンパイルをクリックしてSuccessと表示されれば成功です。

自動コンパイルにチェックが入っているので、テキストエディタで保存をすれば自動的にCSSファイルが作成されます。

つまり作業の開始時に一度この作業をすれば、あとは作業終了までこの画面は最小化しておけばOKです。

ここで注意点が2つあります。

まずフォルダ名やファイル名が日本語だとエラーになります。

こちらは上の画像のフォルダ名を変えただけですがエラーとなりました。

あとソフトを閉じない限り作業中は自動でCSSを作成してくれるので忘れがちなのですが、パソコンをシャットダウンしたら当然ソフトは停止するので、パソコンを起動したらまたKoalaも起動させましょう。

自分はパソコンを再起動したあとにKoalaを起動させずにSassが使えない・・・という事がよくありました（エラーじゃないので気が付きにくい）

今回は以上です。

今回の記事ではまだどのくらい便利か分からないと思いますので、Sassの機能についてはまた別の記事で詳しく書きたいと思います。