SCSSとSASSとは

Pさんが言ってるのは以下のようなコードのことです。

右側が普通のCSSコード、左側がSCSSのコードです。これは中身は同じ命令を書いているのですが、見かけが違います。

SCSSとSASSとは何なのか

上で見たように、CSSと似たようなSCSS、SASSという記法があります。これはCSSをもっと書きやすく、便利にしたメタ言語（拡張言語）です。

SCSS、SASS これらの２つの記法を総称して「Sass」と言います。 「Sass」 とは

「Syntactically（文法的に） Awesome（素晴らしい） StyleSheet（スタイルシート）」の略です。つまりめっちゃ便利で素晴らしいCSSの記法だよということです。

SCSSとSASSを使うメリット

何が素晴らしいのかというと、いろいろなメリットがあるということです。

代表的なのはネストをした記法です。

この例ではSCSSの記法を紹介していますが、SASSも似たような記法です。

HTMLのようにセレクタで指定した中にさらにセレクタを書けるという、入れ子構造を使った記法ができます。長ったらしくセレクタ名を記述しなくて済みますし、どのような構造になっているかがわかりやすくなります。クラス名を変えるときも何か所も修正せずに済みます。

変数を使える

変数を値に設定しておけば、後からまとめて修正したり、値を指定することができます。

いちいちカラーコードなどをコピペするのすごく面倒なので便利です。

ほかにもif elseなど、javascriptで使うような関数を使えたり、組み込み関数で値を変えることができたり、設定したプロパティや値を読み込んだり、引数で細かく指定できたりします。

SCSSとSASSの違い

SCSSとSASS の記法の違いは、主にコードの省略です。

SCSS

header {
        width: 20px;
        height: 20px;
        div {
            margin: 0;
            a {
              width: 20px;
              }
            }
        }

SASS

header
       width: 20px
       height: 20px
       div 
         　 margin: 0
            a 
             　width: 20px

SCSS の方がCSSと似ていて書きやすく、使用している人が多いです。 SASS は｛｝も;もないので書くコード量が減ります。

SCSSとSASSの始め方

どうやって SCSSとSASSを書けばよいのか。はじめはゼロから書いていくのは不安だし間違えも起こりやすいです。最初は同時にCSSの形式で変換されたものを見ながらやるのが良いと思います。

オンライン上で SCSSとSASSを 変換してくれるサイトが SassMeister です

またはVisual Studio Code という無料エディタのEasy Sassという拡張機能を使うと、圧縮したデータにもコンパイルしてもらえてとても便利です。

使い方を覚える必要がありますが、このエディタはかなりオススメです。youtube動画でも使い方をレクチャーしているものがたくさんあるので使い方はわりと簡単に習得できると思います。

というわけで、やはりちょっと難しいし手間もかかりますね。CSSをきちんとできるようになってから始めた方がいいのかな？と思ったのですが、CodePenなどでこのSassを使っている方が多く、また変数を使えることによって複雑なアニメーションを可能にしていると思ったんですよね。

アニメーションのコードを解読したいというのもあって、Sassの基本的なことは抑えておこうと思ったので勉強してみました。変数や組み込み関数などもきちんと使えるようになるとアニメーションに役立つはずだと思います。