HTMLでスタイルを記述するときに、SASS（サス）という言葉を使うと、それはファイルの「.scss」のことを指しているのが一般的です。
Laravelなどのフレームワークを使っていると、「〇〇.scss」といった拡張子.scssファイルを保存しているのは、sassというディレクトリの中です。
▼実例
これを見て、「.scss」のファイルを保存するならディレクトリ名（フォルダ名）も「scss」に統一するべきでは？と感じた方も少なくないのではないでしょうか？
また「.sass」という拡張子のファイルが存在していることもあります。
ここでは、ディレクトリ名がsassなのに、ファイルの拡張子がなぜ.scssなのかや、.sassや.scssの違いについて解説しています。
.sassと.scssの違い（SASSなのになぜ拡張子が.scssなのか？）
結論から言うと、.sassも.scssもどちらもSASS（サス）です。
SASS（サス）という機能を使うための書き方に、.sassと.scssがあるということを指しています。
イメージ的には、英語の中にも、UK英語とUSA英語があるのと似たような感覚です。
このため、ディレクトリ名は「sass」となり、その中に「.scss」という書き方でコードを書いているという意味になります。
SASS（サス）とは何か？
SASSとは、CSSを入れ子（階層構造）で記述したり、変数を使うことができるCSSを拡張した便利な機能です。
Syntactically Awesome StyleSheetの略語で、文法的に素晴らしいスタイルシートという意味です。
CSSをとても使いやすくして自由度を高くしたものがSASSという認識で問題ありません。
ただし、ブラウザはSASS自体を読み込むことはできないため、プロジェクトの中でSASSのファイルをCSSファイルにコンパイルする必要があります。
.sassと.scssの書き方の違い
SASSの機能を使うための書き方には.sassと.scssがあります。
当初は「.sass」のみでした、ところが「.sass」はあまりにも簡略化されすぎていてCSSの書き方との差分が大きくわかりにくいという意見が頻発したため、CSSに寄せた書き方ができる「.scss」が後から出てきました。
「.scss」は「.css」と書き方が似ているため、処理内容や記述が直感的にわかりやすく現在の主流となっています。
このため、SASS（サス）といったら「.scss」を指しているのが一般的です。
なお、.scssに読み方は特になく、「エス シー エス エス」と呼びます。
.sassの書き方
拡張子「.sass」は、改行とインデントで記述していく書き方です。
CSSで使う{ }や;を使わない、徹底的にシンプル化した記述方法になります。
（シンプル化しすぎて、わかりにくくなってしまったことが問題です。）
sassの記述例
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blueなお、「$」は変数です。上記の場合、処理の中で「$blue」と記述すると、その値「#3bbfce」を呼び出すことができます。
.scss
.sassの記述はcssと違いすぎてわかりにくい、、、ということであまり普及しませんでした。
このため、.cssに寄せた記述方法にして新たに生み出されたのが「.scss」です。
実例
上記の.sassの記述を.scssに書き換えると以下のようになります。
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}（参考）コードのコンパイル結果（CSS）
上記.scssと.sassのファイルをcssにコンパイルすると以下のようになります。
CSSファイルへのコンパイル例
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}参考
.scss（.sass）を使うときは「&」を頻繁に使うことがあります。「&」の使いか方や注意点については下記をご参考ください。
