自分にはSassは関係ないと思っていたけど向き合う。
初めてSassというものを知ったのはいつだろうか。
思い出そうとしても思い出せない。コーディングはcssで実装し、企業ともやり取りがない私が知るとなるとTwitterなのかなぁとは思う。そして、在宅求人サイトを見ていても、歓迎スキルにはSassの文字が増えてきたなぁと感じる。
気がつけばただ「便利」「早い」「離れられなくなる」というイメージで、とりあえずProgateの基本のキをやってみた。“あいうえおのあ”“ABCDEのA”でも、触れてみたなら急に仲良くなりたいと思う。
「私、ハイジっていうの！！あなたは？？」 と、こんなイメージ。
企業に勤めるのはほぼ絶望的（年齢・田舎）な私だけど、いつかスラスラと誰かの力になる日のために以下の本を購入してインプット＆アウトプットを開始することにした。(初めてのリンク貼り😊)
本の言葉を大多数引用しつつ、自分の言葉に変換して行こうと思う。
尚、こんなに文章にするのは今回だけ（だと信じたい）。この記事以降はただただアウトプットしていくので！！
スポンサードサーチ
Sassとは何か？なんのメリットがあるのか？
「Sass」とは・・「Syntactically Awesome Stylesheets」
CSSをより効果的に書けるように大幅パワーアップさせた構文的にイケてるスタイルシート
本の言葉をくっつけると上記のように書いてあった。ナニソレカッコイイ。ジャニーズミタイ。
そして、CSSを拡張したメタ言語とのことです。ふむ。
メリット
- 記述の簡略化ができる
- 専用のコメントが使える
- 同じ値を使い回すことができる
- 一度使ったセレクタを使い回せる
- コードの再利用が可能
- 1つのCSSファイルにまとめることができる
- 条件分岐などのプログラム的な処理ができる
- 関数で様々な処理を実行できる
- CSSファイルを圧縮できる
- 他にも魅力たくさん
ふむ！ではまずさわりから。
大きな違い：記述の簡略化ができるとはとても便利である。
メリットひとつめ。
記述の簡略化ができる・・・ネスト（入れ子）構造にすることができるので、何度も同じセレクタを書く必要がなくなる。
同じ親のセレクタをまとめて書けるというのは、
See the Pen
Sass基本のキ by ぺんこ (@penko6930)
on CodePen.
こういうこと。
ここは理解した！
ということで上記に書いたメリットは順に追っていくのです。
まずは入れ子がわかったことと、変数は代入して使い回すあれだなとか、コンパイルはSass→CSSに変換することということを理解。
SASS記法とSCSS記法
構文が異なるため、CSSファイルにはSassを記述できない。
CSSの拡張子が「.css」、Sassの拡張子は「.scss」となる（SCSS記法の場合）
CSSとの互換の問題から主流はSCSS記法ということだけ今は頭に入れておく。
ちなみに、
SASS記法“｛ ｝”、“；”を省略することができる。
ul
margin: 0 0 1rem
li
margin-bottom: 5px
SCSS記法
ul{
margin: 0 0 1rem
li{
margin-bottom: 5px;
}
}
（コード記述のいい方法考えないと）
次は環境構築について。