最近Sassを使ってないなぁって話
初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。
↑私が10年以上利用している会計ソフト！
変数やネスト、計算はCSSだけでOK
過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。
変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使いたいときも、CSSなら異なる単位でも計算式を書けるので、Sassよりも使い勝手がいいかなと思います。
ネストは使い所に注意
ネストは使用自体に賛否があったりしますが、メディアクエリーと組み合わせたり、疑似要素・擬似クラスなどを & で繋げてネストさせる程度であれば管理もしやすいでしょう。
以下はメディアクエリーをネストさせた例です。メディアクエリーのブレークポイントに比較演算子を使えるようにもなりましたし、こういったネストの使い方なら効率がよくなり、問題も少ないかと思います。
body {
background: #0bd;
@media(400px < width){
background: #ddd;
}
}
ただし、Sassでは使えたセレクターをネストする記述はできません。例えばクラス名「item-title」を指定したいとき、Sassでは
.item {
&-title {
color: #0bd;
}
}
このように書けばスタイルが反映されました。しかしCSSで記述しても変化はありません。CSSでネストするなら必ずクラス名をすべて記述します。
.item {
.item-title {
color: #0bd;
}
}
まぁこれだとネストする意味もそんなになさそうなので、普通にネストさせずに記述すればいいですね。ネストを使う上で賛否のあるクラス名の指定は解消されるので、前述のとおりメディアクエリーや、疑似要素・擬似クラスを指定するときのみ、ネストさせるといいかと思います。
小規模Webサイトならファイルの分割（パーシャル）も不要
Sassではファイルをパーツごとに分割して管理するパーシャルは便利ですよね。CSSでもファイルを分割すること自体はできますが、読み込むCSSファイルの数だけ読み込み時間がかかってしまいます。Sassのパーシャルを使ってファイルを分割すれば、制作時には必要なファイルのみ編集すればいいですし、最終的に1つのCSSファイルに変換されるので、ファイル読み込みが一度ですみます。そのため「管理はしやすく、読み込みは早く」が実現します。
ただ、LPのような1ページ完結のWebサイトや、ページ数が少ないWebサイトなら、わざわざSassの環境を作ってファイル分割しなくてもいいのではと考えています。1つのCSSファイルにすべてのスタイルを書いていっても、大した行数にはならないかと。それこそ小規模のWebサイトから作り始める初学者の方にとっては、学習コストを投じてまでSassにこだわる必要はないかと思います。場合によってはSassを使うメリット以上に、デメリットの方が大きくなるかもしれません。
ページ数が多いならフレームワークを使用
ではページ数が多いWebサイトならどうするか？規模が大きくなるほどCSSファイルをパーツごとに分割して管理したいものです。
私の場合はReact(Next.js)やVue（Nuxt.js）でWebサイト制作をするのが標準になってきていて、こういったライブラリーやフレームワークではコンポーネント単位で設計、管理することを前提として進めていくので、わざわざSassを使わなくてもReactやVueがやってくれるのでいいよねーという話になります。
過去記事「Vite + React で新規プロジェクトの開発環境を作ろう」ではViteとReactを使う環境設定について書いていますが、Viteだとフレームワークを使わない、素のJavaScriptのみの環境構築もできます。新たにReactやVueを学ばなくてもすぐに使えるようになるはずです。Viteの環境設定についてはICS MEDIAさんの「jQueryからTypeScript・Reactまで – Viteで始めるモダンで高速な開発環境構築」という記事でも紹介されているので読んでみてください！
じゃあSassの勉強はしなくてもいい？
以前ほど必須スキルとは言い難いかなと思います。私がもし雇うならSassの知識よりフレームワークを使ったコンポーネント管理の知識がある人を優先したいです。とは言えSassが死んだわけではなく、制作会社では現役で使用しているところも多いでしょう。実際CSSの機能やフレームワークなどの利用状況に関するアンケートを毎年行っているState of CSSの2023年の結果では、有効回答のうち72%がSassを利用していると答えています。
WebクリエイターボックスのXでもアンケートをとってみました！Sassを使う人とまったく使わない人、二極化しましたね。使い所によるのでしょうが、概ね想定通りでした。
みなさんはSass、使っていますか？ここ1年の使用状況はどんな感じでしょう？
— Webクリエイター ボックス (@webcreatorbox) October 23, 2023
Sassを使用している企業や人と付き合いがありそうなら学んでおいた方がいいですし、単純にSNSで知らない誰かが「Sass！必須！Sass！必須！」と言っているのを見かけた程度であれば、今はスルーしておいていいと思います。転職したい制作会社や、取引のあるクライアントがどういったスキルを求めているのかをしっかり見極めて、必要に応じたスキルを身につけることが大切ですね。
