SCSSのおかげでコーディング速度が1.5倍になった件について【前編】

突然ですが皆さんはコーディング速度どれくらいでしょうか？
正直自分は周りと比較したことがないのでわからないのですが周りからはよく早いと言われます。
ただそれで終わらないのが僕山下。
さらに高みを目指すために少しの時間を犠牲にして新しい技術を習得しました！

その名も「SCSS」（正式にはSASSっぽい）

SASS/SCSSで厳密な違いがあるのですが備忘録としてここに記していきたいと思いますが
長くなりそうなので前編・後編に分けてお届けしたいと思っております。

SASS/SCSSとは？

「Sass（サス、サース）」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。CSSがめっちゃ見やすく書きやすく保守もしやすいでっせ！みたいな感じです。

SASSとSCSSがありますがどちらもメリットや使い方の部分では同じです。

違うところと言いますとSASS記法・SCSS記法と呼ばれるように書き方が少し変わります。

SASS記法：
SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。
ただ、入れ子にすることが多いのでやっぱり波括弧は欲しい、、、

SCSS記法：
SCSS記法の特徴は、書き方がCSSに似ていることです。なのでCSSを触れる人ならそんなに学習コストもかからずかつ生産性が驚くほどアップしますのでこっちの方が一般的に普及しているみたいです。
（名前もSCSS標準にすればいいのに。調べても基本的にSASSで出てくるので。。。）

SASSのメリット

実際にSASSを使うと何ができてどんなメリットがあるの？が気になるところだと思います。
SASSを使う事のメリットを一つずつご紹介します。

メリットその1
入れ子の使用が可能

CSSでは、それぞれのセレクタが独立して記述されていますが、Sassはネストを使い、子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能です。親と子の関係性がわかりやすいので、可読性が高まり保守性もぐんとアップするということですね！

メリットその2
変数を利用できる

これは便利ですね！基本的にWEB制作をする際は色コードや幅の数値が何パターンか決まっているものです。それにより毎回「color: #000000;」とか書いていたものが「color: $black;」で済みますからね。例では恩恵がわかりにくいかもですが実際使ったらこれがすごく捗ります。

メリットその3
関数を利用できる

これが最大の特徴ではないかなと思います。
スタイルのテンプレートを関数で定義することによって変数だけではなく共通のボタンとかがあったら関数を呼び出すだけで一発でスタイルを当てることが可能です。

これによりスタイルを繰り返し書くことが無くソースコードを短くでき、保守や修正がしやすくなる訳ですね

前編は主にメリットについて述べていきましたが
後編は実際の書き方や導入方法についてご紹介していきたいと思います！