Sass使わないでみた

どうも、くまだです。

コーディングの案件で、試しにSassを使わないで普通のCSSで実装した話。

Sass使わずにCSS使う

Sassを使っているときの自分の状況を解説すると、下記のようになります。

  • パーツごとにSassファイル作ってファイル分割している
  • mixinはメディアクエリぐらいしか使っていない
  • Sassの「$変数」は使わずにカスタムプロパティを使っていた
  • Sassの入れ子機能使っていない

$変数も入れ子も使わないので、SassをつかっているけどほぼCSS式に書いている感じです。

上の前提で、試しにSassを辞めて一周回ってCSSで実装した状況で変わったのは、

  • ファイル分割辞めた(パーツごとにファイル作るのをやめた)
  • メディアクエリはユーザースニペットで代用

ぐらいです。

ファイル分割辞めた

Sassを使っていたときは、ファイル分割できるのでパーツごとにファイルを作っていました。

_title.scssとか、_button.scss、みたいな感じです。

しかしそれだと、①ファイル作成→②ファイル名付ける→③ファイルの上のほうに@useつける、みたいなことをしていました。(もしくは、テンプレのscssファイルを複製してファイル名を変える、みたいな)

ファイル分割を辞めたことで、①、②、③の工程を短縮になりました。style.cssに全部書き込むので①、②、③の工程がいらなくなる、と。

また、パーツごとのファイル探しもしなくてよくなりました。style.cssの中だけ検索すればいいし、なによりCSSフォルダがすっきりします。

ちょっとしたことですが、これだけでも時短になった気がします。

mixin機能はユーザースニペットで代用

mixin機能は、自分の場合メディアクエリぐらいしか使わないので、ユーザースニペットで代用。メディアクエリの数字はいつも同じ数字使っているので、それでいいかなあと…。

それ以外はほぼほぼCSS式に書いていたので、SassからCSSに乗り換えてもほとんど問題がなかったです。

既存サイトの追加・改修だったらCSSが都合がいい

自分の状況ですと、既存サイトにページ追加だったり改修みたいな案件のとき、ほぼCSSで書くことが多いです。それだったら最初からSass使わないでCSSでいいのでは、ということもあってCSSでいいかなと。

納品データもCSSです。

また、Webディレクターさんがデータをいじることがあり、手元にあるSassファイルと差分が発生するので、その場合もSassは使わないケースがあります。

状況に応じて使い分ける

とはいえ、じゃあ完全にSassを使わないのかといえばそうでもなく。

例えば、5~8ページ程度の小規模サイトであれば、Sassはいらないかもしれません(少なくとも自分は使わない可能性が高い)。

しかし、以下のケースの場合はSassを使ってもいいと思います。

  • チームで制作する場合
  • 共有されたテンプレファイルがSass(制作会社様からこれ使ってください、みたいなとき)
  • 中規模~大規模なサイトをコーディングする場合
  • そもそもSassを使いたい場合

まだまだ現役でSassは使えますので、Sass勉強しなくていいとはなりません。使えないより使えたほうがいいのは間違いないので。

脳死でSass使うのではなく、状況に応じて使うのがいいんじゃないかと思います。

ここまで読んでくださりありがとうございました。

この記事を書いた人