SCSSとSASSの違いとは

SCSSとSASSの違いは、書き方であり、SCSSの方が一般的に使用されています。そもそもSCSSは、SASSがCSSとの互換性が十分ではなかったため開発されたものであり、SCSSの方がスタンダードになっているのは当然の流れとも考えられます。しかもSCSSなら、SCSS独自の書き方だけではなく、いつも通りのCSSを書くことも可能なため便利です。また、SCSSとSASSの違いとして、当然である部分ですが、拡張子が異なることも挙げておきます。SCSSが「.scss」であることに対し、SASSは「.sass」です。書き方については、後ほど触れていきますが、大きなポイントとしては、SCSSがカッコ（{ }）を使い、入れ子構造を記述できるところでしょう。

SCSS／SASSの導入方法とは

ここからは、SCSS／SASSの導入方法についてご説明します。

１）Rubyをインストールする

まずはRubyをインストールします。Macを使っている方は、標準でRubyがインストールされているので、この作業は不要です。Windowsを利用している方はRubyを配布サイトからダウンロードします。PCの環境によってダウンロードをするファイルが異なりますので、使用するPCに基づいてご確認ください。
※Rubyの詳細なダウンロード方法や設定に関してはダウンロードサイトにてご確認ください。

2）Saasをインストールする

Rubyをインストールし終えたら、次はSaasをインストールします。Macはターミナルを使います。Windowsは、RubyGemsシステムを使います。コマンドプロンプトから「gem install sass」を実行して、Saasをインストールします。コマンドによりSaasがインストールされたことを確認して終了です。

3）コンパイラをインストールする

前述したように、SCSS／SASSで記述したコードはそのまま使用できません。そこでコンパイルをしなければいけないのです。手動で「sass style.scss:style.css」というコマンドを実行する方法と、「sass --watch style.scss:style.css」というコマンドにより自動的にコンパイルするように設定する方法があります。これ以外の方法として、変換ツールがあります。中でもKoalaというフリーソフトがMacとWindowsの両方に対応しており有名です。

SCSS／SASSの書き方

それでは、SCSSとSASSの書き方について例を挙げて解説しましょう。同じコードをCSS、そして、SCSSとSASS、それぞれで書いた場合を用意しました。これらの違いについてあらためてご覧いただければ幸いです。

まず、CSSの場合として以下にシンプルな例を記述します。.productsクラスにある.textの幅を指定するために、このような記述をしています。

【CSSで記述した例】

.products .text {
   width: 300px;
}

SCSSの書き方

多くの方が使用しているSCSSに関しては、ネスト（入れ子構造）による書き方が最大の特徴です。「 { 」の使う位置により、.productsクラスにある.textの位置関係が明確にみえるのでネスト（入れ子構造）は見やすい記述だということがわかるでしょう。

.products{
       .text {
         width: 300px;
       }
}

SASSの書き方

SASSの記述をすると、「 { 」が無くなるので、見慣れない雰囲気を感じる方も多いでしょう。位置関係はインデントのみで表しています。

.products
   .text
      width: 300px

短いコードですが、それぞれの違いを感じていただけましたか。SCSSの記述がいかにわかりやすい構成であるか実感いただけたかと思います。SASSの場合、さらにシンプルではあるものの、SASSの課題改善から生まれたSCSSを実践したいものです。