2023.07.23
2023.08.08 (更新日)

【慣れればSASS一択】SASSとSCSSはどっちがいい？特徴や注意点も解説

WEB制作

サイト制作やWordPressに必須のCSSを素早く、簡単に記述できるSass。
すでに業務などで使用している方も、これから導入しようか迷っている方も、SASSとSCSSのどっちを使用するか迷いますよね。

他の記事ではSCSSを推している記事が多いですが、この記事では、業務効率化の観点から、むしろSASSをおすすめしています。

ぜひSASSとSCSSのどっちを使用するかの参考にしてください。

また、このブログではSASS、SCSSの総称をSass、各記法をそれぞれSASS、SCSSと大文字で書き分けています。

Sassのまとめ記事はこちら

まとめ記事

【Sassまとめ】Sassについて知りたいこと、導入方法や使い方や全部わかる

この記事を読んで欲しい人

Sassの導入を検討している人
SASSとSCSSのどちらを導入するか迷っている人
SASS、SCSSそれぞれの特徴を知りたい人

先に結論を書いておきます。

SASSとSCSSではSASSのほうがコード量が少ない。
SASSの情報量は少ない(SCSSユーザーが多い)が、SCSS向けの記事をSASSに転用することができる。
社内や周りがSCSSを使用しているなら合わせたほうが良いかも。

Sassとは何か？

簡潔に言うと、CSSに追加機能がついてコードの記述量が減り、コードの管理や修正が楽になる、CSSの業務効率化ツールです。

特にコード記述量の多い大規模なサイトになるほど導入の効果も大きくなっていきます。

これからSASS記法、SCSS記法それぞれの特徴を解説していきますので、どちらを使用するかの参考にしてみてください。

SASSとSCSSの特徴と注意点

SASSとSCSSの違いは、拡張子の違い(.sassと.scssの違い)を除いて1つしかないのですが、この違いで業務効率が大きく変わってきます。

まずはSASSとSCSSの違いを見てみましょう。

SASSとSCSSはコードの書き方が違う（SCSSのほうがよりCSSに近い）

SASSとSCSSは記法が違います。

まずは実際にコードをみて頂いた方が早いと思うので、CSS、SCSS、SASSの基本的なコードを掲載します。

CSSのコード。

.paragraph {
    font-size: 16px;
}
.paragraph .min-text {
    font-size: 12px;
}

SCSSのコード。

.paragraph {
    font-size: 16px;
    .min-text {
        font-size: 12px;
    }
}

SASSのコード

.paragraph
    font-size: 16px
    .min-text
        font-size: 12px

SCSSはCSSと記述方法が似ていますね。

また、下記の記事ではSassのメリットやできることを解説しています

Sassのメリット・できること5選！デメリットや必要性も解説【CSSからステップアップしよう】

次はSCSSとSASS、それぞれの特徴を見ていきましょう。

SCSSの特徴

.paragraph {
    font-size: 16px;
    .min-text {
        font-size: 12px;
    }
}

CSSとSCSSはほぼ書き方は同じですね。
違うところは「.min-text」が「.paragraph」の中に入っているところです。

上記のコードは下記のCSSコードと同じ意味合いになります。

.paragraph {
    font-size: 16px;
}
.paragraph .min-text {
    font-size: 12px;
}

SCSSでは、CSSの{}の中にさらにセレクタを記載し、入れ後構造にすると、上記のCSSのコード例と同じような意味合いになるので、同じ単語を記載する手間が省けます。

SASSの特徴

.paragraph
    font-size: 16px
    .min-text
        font-size: 12px

一方SASSの方は、SCSSの書き方から、さらに[ {} ]の部分とスタイル指定の語尾の[ ; ]の部分が省略されています。

この[ {} ]の部分がなくなっているので、SASSではインデント（スペースでできている段）によって、入れ後構造を表現します。

このインデントがずれるとコードの意味合いが変わってしまうのがSASSの書き方で、デメリットでもあります。

SASSはインデントを間違えると意味合いが変わってしまう！

記述するコード（記号）が減ることによって、特にコード量が多くなればなるほど、コーディングが楽になっているのを実感できると思います。

このSASS記法と、以下の記事で解説しているPrettierやEmmet、エディタのショートカットなどを使用すればさらに効率的にコードを記述することができます。

低単価でWEBエンジニアをしていた私がやっていた時短テクニック

これらのSCSSとの違いを受け入れられる方にはSASSをおすすめしています。

会社やチームに所属している人は注意！

所属している会社や周りの人がSCSSを使用している場合はSASSを使わずSCSSにしたほうが良い場合もあります。
筆者も作業を分担する仕事の時はSCSSを使ったり、そもそもSassを使用しない場合もあります。

【デメリット】ネット上にはSCSSについての記事がほとんど

現在SCSSユーザーがほとんどなため、ネット上の記事はSCSSを使用している方向けの内容となっています。

これをネックにSCSSを選択する方が多いようですが、SASSとSCSSの違いは記法の違いなので、SCSS用の記事をSASSに読み替えることができますので、ほとんど問題なしです。

結論。SASSとSCSSはどっちがいい？

業務効率化の観点から、SASSをおすすめします。

先ほど各コードの例に出した通りSCSSは、
業務効率化できる機能がたくさん盛り込まれているものの、記法はCSSとほぼ変わりません。
（CSSと同じ感覚で書きやすいというメリットでもあります）

対してSASSはSCSSと同じ機能ながら、コード例の通りさらに記述を減らす事ができます。

この記事では、業務効率化の観点からSASSをおすすめしていますが、どちらも一長一短あるので、ぜひどちらとも試してみてください。