Sass入門したい！というか入門の前に門の前で躊躇してるくらいの感じの人へ

2018年10月5日

10月でございます。もう今年も終わりだなと言っても本当に違和感がありません。

秋も深くなり、食欲の秋やスポーツの秋を満喫している方も多い事でしょう。

今回は勉強の秋という事で、Sass入門（しかも第一回で終わるやつ）をテーマに書きますよ。

Sassとはそもそもなんなのか

小難しい話は他サイト様でお勉強頂く事をオススメします。なんてったって私はバカですから、小難しい事はどうでもよいのです。

Sassはとにかく「CSSを効率よく書ける素敵なやつ」くらいに思っておいて頂ければいいんじゃないでしょうか。

Sassを使う準備

効率よく書ける素敵なやつなのですが、Sassを使用する為には準備が必要です。

大きく分けて

• Rubyのインストール
• Sassのインストール

があります。Win/Macどちらでも使用出来ますが、Macの方が楽かもしれません。

最初にRubyのインストール

ターミナル（Winの方はコマンドプロンプト）を起動して、

と入力してバージョンチェックしてみましょう。その下にバージョンが表示されればRubyはインストールされています。

されていない場合はダウンロードしてインストールしましょう。

Win　→　https://rubyinstaller.org/

Mac　→　rbenvとかで上手いことやりましょう。

【参考記事】https://qiita.com/prgseek/items/ff037cc6134ff9303c67

インストールが完了したら、再度バージョンチェックしてみて下さいね。

Sassのインストール

まずSassのバージョンチェックです。これでバージョンが表示されればSassもインストールされています。

されていない場合は

でインストールします。

ちなみにこういう画面はスタバで良く映えますので、お試し下さい。

こちらもインストールが完了したら、再度バージョンチェックしてみて下さいね。

早速Sassを書いてみる

今までcssを書く時は、ファイル名を「style.css」という具合にしていたと思います。

Sassでは「style.scss」というファイル名で保存しましょう。

とりあえずこれでいいです。何も新しくないですが。

これを「.scss」という拡張子で保存して下さい。

Sassをコンパイルする

コンパイルとか書くからわかんなくなるんですよね。scssのままだとブラウザが認識出来ないからcssに変換するよという事だと思って頂ければ大丈夫です。

でもなんか無駄に言いたくなるんですよね。コンパイルしてー。

またターミナルで（Winはコマンドプロンプトで）scssのあるフォルダに移動します。そしてこれを。

これでコンパイル完了です。style.cssというファイルが出来上がっていると思います。コンパイルしたからです。コンパイル成功です。

でも、scssファイルを更新する度に毎回コンパイルするの面倒ですよね。コーディングに集中したいのにコンパイルに気を取られたくない、そんな時は。

こうすればscssファイルを保存する度に、自動的にcssファイルも更新してくれるようになります。自動コンパイルです。自動コンパイルを止めたい時はCmd（WinはCtrl） + Cで止まります。

 

なんか結構長くなったし、コンパイルって言い過ぎたので、やっぱり第二回書く事にします。

今回はSassを使う準備とコンパイルの流れまでという事で。