こんにちは。Maromaroのtakaです。
現在、あたり前のように使っているSCSSですが、
そういえばSCSS（SASS）とCSSの違いってなんだろうとふと考えたので記事にしました。

SCSS（SASS）とは？

簡単にいうと「CSSをより効率的に書ける言語」です。

Sass＝Syntactically Awesome StyleSheet

• Syntactically　＝　構文的に
• Awesome　＝　 驚くべき
• StyleSheet　＝　スタイルシート

こういった意味となっております。

SCSSはSASSの違いはざっくりですが、

SCSS＝CSSと似た記述
SASS＝Rubyと似た記述

といったような形になります。

SCSS

.test{
margin:10px;
    a{
     padding:10px 20px;
   }
}

 
SASS
.test{
    margin:10px
a
    color:#12cacc;
    padding:10px 20px;
}

上記のように若干書き方は違いますが、
実行結果は同じです。
SCSS（SASS）を導入するメリット
CSSコードが減る！
SCSS（SASS）を導入すると、CSSのコード量が減ります。
下記記述の入れ子や変数を使うことにより簡易化できます。
コードの保守管理がし易い！
SCSS（SASS）はネスト（入れ子）を使ってコードを書くことができます。
コード量も減りますし、視認性も高まります。コードの保守管理が格段にし易くなるでしょう。
バグが減らせる！
SCSS（SASS）を導入すると、バグ（不具合）を減らすことが期待できます。
コード量が減ることで、人為的なミスが減ることが主な理由です。
CSSにはない機能が使える！
SCSS（SASS）では、変数やMixinなど、CSSをもっと便利に使える機能が備わっています。
 
SCSS(SASS)はCSSにコンパイルする必要がある。
SCSS（SASS）はCSSをより書きやすくしたものなので、
SCSS（SASS）で書いたコードをCSSにコンパイル（変換する）必要があります。
CSSへのコンパイルには様々なソフトウェアを使用しますので、
使用環境にあったソフトを探してみるのも良いかもしれません。
ちなみに私はDreamweaverでコンパイルしています。
まとめ
SCSSが使えればコードの記述量も減り、時間短縮もでき、
管理もしやすくなるので、必須レベルと思われます。
コーディングは速さと正確さが命ですので、是非覚えていきたいですね。
              

                
 
Web制作
                  
CSS
SASS
コーディング
SCSS