2016年1月20日、区切り良い年明けから出来るエンジニアになるべく研修生として勉強を始めた私。
HTMLとcssの記述ができてくるとすこぶる楽しくなり夜中もぽちぽち(タイピング遅い)。
ターミナルコマンドも習い、よく分からんがやってることはかっこいい！そしてぽちぽち。
およそ1ヶ月後・・・sass楽しい！！！みんなもやろう！！！
というわけで本題のsassについてあれこれ説明。
難しいことは置いといて、mac前提で進めます。

sassとは？

「Syntactically Awesome Style Sheets（構文的に素晴らしいスタイルシート）」
cssメタ言語です！と言われても・・ですよね。私はそうでした。
cssの書き方は一つではなく、sass、less、stylusなどがあります。
さらにsassの中にsass形式(.sass)、scss形式(.scss)とあり、cssと書き方が似ているscssを私は使っています。
ネスト(入れ子)で書けて、変数やmixinというとんでも機能が使えコーディングの効率やメンテナンス性が上がり、とにかく楽しくなる言語です！

Sassでよく使う機能まとめ

とりあえず使ってみましょう！

インストール

インストールしないと使えないらしいので入れます。
かっこいいターミナルでコマンド打ちましょう！

1.ruby
なぜrubyを？まぁいいじゃないの・・・
Macには標準でインストールされているので、バージョンだけ確認。
$ ruby -v
何かエラーでなければOK!

2.sass
$ sudo gem install sass
gemは宝石という意味で、ruby=ルビーを使ってインストするよ！ってことらしいです。
途中パスワードを聞かれるので、お使いのmacパスを入れましょう。そして待ち・・・
終わったと思ったら本当に入っているか確認。
$ sass -v
でバージョンが表示されればOK!

！エラーが出た・・・
rubyのバージョンが古いとエラーが出てしまう可能性があるので、以下を参考にHomebrewいれたり何なりしてみてください。

すぐにできる！Rubyのインストール方法【Mac編】

どうやって使うの？

HTMLにcssを読み込めばいいのです・・・え？

<link rel="stylesheet" href="css/style.css">

こんな風に・・・え？
拡張子はcssです。なぜか？.sassや.scssのものは読み込んでくれないからです。
書き方はscss形式にしちゃったよ・・？そうです、つまり**変換(コンパイル)**するのです！

ターミナルで作業中のファイルがあるディレクトリへ移動、
$ sass style.scss:style.css
と打つとstyle.scssのファイルがstyle.cssと拡張子を変えて作られます。素晴らしい！
これを上記のようにHTMLに読み込ませて使うというわけです。
でも一回一回コマンド打つの面倒くさい・・・その通り。
そこで出てくるのがコンパイラ。scssを保存すると、その都度自動でcssにコンパイルしてくれるツールがあるんです！

それを次の記事で導入から使うとこまで説明します。
閲覧ありがとうございました。