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

2018年10月5日

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

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

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

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

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

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

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

大きく分けて

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

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

ruby -v

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

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

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

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

sass -v

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

されていない場合は

gem install sass

でインストールします。

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

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

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

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

* {
  margin: 0;
  padding: 0;
}

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

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

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

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

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

sass style.scss style.css

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

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

sass style.scss:style.css --watch

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

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

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

Posted by demoya

まだ、コメントがありません