「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ

Dart SassやLibSass、Ruby Sassなど、Sassにもいくつか種類があります。

2022年7月現時点ではDart Sassが主流ですが、それ以外との具体的な違いに関してまとめておきます。

Sassの種類

「Sassの種類」といっても2つの側面があります。

1つは「記法」で書き方の問題です。
2つ目はSassをコンパイルしている「言語」の問題です。

最近は記法の方は「SCSS記法」が一般的になっているので、現在Sassの種類に関する話をするときは言語を指す場合が多いです。

記法

記法に関しては「SASS記法（全て大文字になるので注意）」と「SCSS記法」の2種類しかありません。
また、SASS記法は全く浸透せず、2022年現在では見ることはまずありません。

浸透しなかった大きな原因は、記法がCSSと共存できなかったことです。

SCSS記法は通常のCSSと同じように記述できて、それに追加する形でSass独自の機能が使えます。

.main{
  .wrap{
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }
}

それに対してSASS記法はインデントを使うことで、波括弧は省略して記述します。

.main
  .wrap
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;

記述量は括弧が減る分だけ少なくなりますが、いままで作ってきたCSSをコピペで持って行けなかったり、いままでCSSの書き方に慣れている人からすると別物という印象を与えてしまいます。

SassとSASSの読み方の違い

Sassの場合は「サス」と読みますが、記法を表す全て大文字のSASSの場合は「エスエーエスエス」はと読みます。

SCSSの場合は「エスシーエスエス」になります。

言語

Sassは用意したSassファイル（SASS記法なら.sass、SCSS記法なら.scssファイル）をCSSにコンパイルする必要があります。

このコンパイルするときに、どの言語を使用しているかによってSassの名前が変わります。

Ruby Sassは既にサポート終了なので、いま使うとなるとDart SassかLibSassのどちらかです。
ただ、2022年現在で公式が推奨しているのはDart Sassです。

言語によって、使える機能も変わってくるので、LibSassをそのままコピペでDart Sassに持ってきてもそのままでは使えず、細かい調整が必要になります。

Ruby Sassの特徴

発表された2006年当時はRubyが急成長しており、多くの人に使われ普及しました。

しかし、Ruby製であることによるコンパイルの遅さや、他ツールとの連携の問題が出てきます。
その結果、開発も徐々に活発には行われなくなり、2019年の3月26日にサポート終了しました。

コンパイルには名前の通りRubyのインストールが必要で、一緒に「Compass」と呼ばれるフレームワークが使われていました。
Compassを使えばよく使う便利なCSSを一気に読み込めたり、ファイル監視なども行えました。

この辺りは過去に記事にしているので、そちらもご覧ください。

Webrandum

既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイル...

https://webrandum.net/ruby-sass-install

Sassのコンパイルはgulpを使用する事が多いのですが、自分以外が制作した昔のコードを触る時に、Compassというものが使用されている時があります。がっつりコードを触る場合はgulpの設定からした方がいいのかもしれませんが、scssファイルにcompassが@importされている場合はなかなか面倒です。少し書き換えるくらいなら、自分もCompassをインストールして使えるようにしておけば、すぐ対応できます。というわけで今回はMacのCompassインストール方法と最低限の使い方についてまとめておきます。ちなみに新規にCompassでのプロジェクト...

古いプロジェクトの場合は見かける可能性もありますが、サポートは終了しているので移行は必要です。
ただし、このCompassを使っている場合はCompass専用の記述があり、Sassファイルをそのまま別Sassで使えるようにするには移行作業が少し面倒です。

出力されたCSSをもとに分割して新たなSassファイルを作成するのがいいでしょう。

LibSassの特徴

Ruby Sassの「コンパイルが遅い」「他ツールとの連携が難しい」問題を解決するために開発されたのが「LibSass」です。
LibSassで使われている言語はCやC++で、動作の速さや連携のしやすさを念頭にして開発されています。

ちなみに、LibSass自体はライブラリのような形で、このLibSassを使用するためラッパーがいろんな言語で存在しています。
フロントエンド開発でよく利用されているNode.js向けの「node-sass」は、LibSassをNode.jsで使えるようにしたラッパーになります。

普及して非常に多くの人に利用されていましたが、複雑なSassの実装をC++で開発できる人間は少なく、徐々に機能追加は行われなくなりました。

そして、2020年10月に非推奨 となり、今後は新機能の追加は行われないことになっています。

Dart Sassの特徴

LibSassの次に開発されたのが「Dart Sass」です。

Dart Sassはアプリ開発で話題なFlutterでもベースになっているDart製のSassで、パフォーマンスをある程度担保しつつ、他ツールとの連携のしやすさと開発のしやすさを兼ね備えたSassです。

いままで「node-sass」を利用していた人は、Dartからコンパイルした「sass」を使用するのが移行として手軽です。

現在が開発が盛んに行われていて、公式でも推奨されています。

LibSassから細かい変化もあり、大きなところでいくと別ファイルをインポートするための「@import」の代わりに「@use」を使う必要があります。