どうも、くまだです。
コーディングの案件で、試しにSassを使わないで普通のCSSで実装した話。
LPデザインのお仕事募集中です↓↓↓
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使うのではなく、状況に応じて使うのがいいんじゃないかと思います。
ここまで読んでくださりありがとうございました。