Sass入門したい!というか入門の前に門の前で躊躇してるくらいの感じの人へ
10月でございます。もう今年も終わりだなと言っても本当に違和感がありません。
秋も深くなり、食欲の秋やスポーツの秋を満喫している方も多い事でしょう。
今回は勉強の秋という事で、Sass入門(しかも第一回で終わるやつ)をテーマに書きますよ。
Sassとはそもそもなんなのか
小難しい話は他サイト様でお勉強頂く事をオススメします。なんてったって私はバカですから、小難しい事はどうでもよいのです。
Sassはとにかく「CSSを効率よく書ける素敵なやつ」くらいに思っておいて頂ければいいんじゃないでしょうか。
Sassを使う準備
効率よく書ける素敵なやつなのですが、Sassを使用する為には準備が必要です。
大きく分けて
- Rubyのインストール
- Sassのインストール
があります。Win/Macどちらでも使用出来ますが、Macの方が楽かもしれません。
最初にRubyのインストール
ターミナル(Winの方はコマンドプロンプト)を起動して、
ruby -v
と入力してバージョンチェックしてみましょう。その下にバージョンが表示されればRubyはインストールされています。
されていない場合はダウンロードしてインストールしましょう。
Win → https://rubyinstaller.org/
Mac → rbenvとかで上手いことやりましょう。
【参考記事】https://qiita.com/prgseek/items/ff037cc6134ff9303c67
インストールが完了したら、再度バージョンチェックしてみて下さいね。
Sassのインストール
sass -v
まずSassのバージョンチェックです。これでバージョンが表示されればSassもインストールされています。
されていない場合は
gem install sass
でインストールします。
ちなみにこういう画面はスタバで良く映えますので、お試し下さい。
こちらもインストールが完了したら、再度バージョンチェックしてみて下さいね。
早速Sassを書いてみる
今までcssを書く時は、ファイル名を「style.css」という具合にしていたと思います。
Sassでは「style.scss」というファイル名で保存しましょう。
* { margin: 0; padding: 0; }
とりあえずこれでいいです。何も新しくないですが。
これを「.scss」という拡張子で保存して下さい。
Sassをコンパイルする
コンパイルとか書くからわかんなくなるんですよね。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を使う準備とコンパイルの流れまでという事で。
ディスカッション
コメント一覧
まだ、コメントがありません