複数人でSassを使うときのよくある問題点
カテゴリー：Sass
タグ：
最近はちょこちょこと業務でもSassを使うようになりました。
まだまだスキルは低いですが、その中で色々と反省点が見えてきたので、問題点を振り返ってみたいと思います。
経験上、制作の規模は小規模〜中規模のプロジェクトでのお話です。自己流なところが結構あるので、突っ込み歓迎です！
コーダー以外もSassを触る前提で動く
問題点
いわゆるベンチャー企業の制作現場だと、専属のコーダーがコーディングを行わないこともあります。
特にphpなどのサーバーサイドのシステムと絡んだ業務だと、フロント部分はエンジニアが兼任することも多いです。そういう場合、「そもそもSassって何？」というメンバーとの共同作業が発生することもあります。
解決策
最初のうちは複雑な使い方や、ディレクトリ構成は避けた方が良いです。自分はそれで失敗しました。。
特にmixinやextendはcssに興味のある人くらいしか使わない傾向にあるので(完全に偏見)、セレクタのネストや、変数を使うくらいで様子を見た方が無難です。個人的にはそれだけでもSassを導入する価値はあると思います。
徐々に浸透させていき、「Sass良いじゃん！」という空気になったら本格的にmixinやextendといった機能を利用しちゃいましょう！
Sass→cssの変換(コンパイル)にやけに時間がかかる
問題点
実際にあったことなのですが、Sass→cssの変換に時間がかかることがありました。
原因は必要以上に他のファイルからimportされていたためです。
Sassの利点として、複数のcssファイルを統合できる点があります。ただ、あまりにも影響ファイルが多いとそれだけ変換に時間がかかります。
例えば20個のsassファイルがあり、それぞれ「_utility.scss」をimportしていたとします。その場合、「_utility.scss」を更新すると、影響する20個のファイル全てに変換処理が走ることになります。
滅多に更新しないファイルなら良いのですが、更新頻度の高いファイルだと保存する度に変換待ちが発生して、作業効率が落ちてしまいます。
解決策
更新頻度の高いファイルはなるべく他のファイルからimportされないようにしておきます。環境にもよりますが、5個以内に収めないと結構ストレスがたまります。。
Sassの利点から外れてしまいますが、更新性の高いファイルはcssを統合せずに、独立したファイルにするのも手です。
mixinやextendの管理が煩雑になる
問題点
せっかくmixinを作っても、誰にも使われずに無駄になることがありました。
解決策
・そもそもそのmixinは必要か
Compassには便利なmixinが一通り用意されています。似たような機能が既に無いか一度確認してみてもいいかもです。
・mixinやextendを個別のファイルで一括管理する
このやり方が最良なのかはわかりませんが、「_mixin.scss」や「_extend.scss」、ついでに「_variable.scss(変数を管理するファイル)」というファイルを作り、そこで一括管理するようにしていました。
上記ファイルは全てのSassファイルからimportするようにします。
こうするとどこにmixinやextendの元ファイルがあるか一目瞭然なので、管理しやすいです。ファイル数も多くないので、「Sassを触る人は最低限上記ファイルだけでも目を通すようにお願いします！」と周知しておけばわかりやすいです。
最後に
Sassを運用するにあたりとても参考になるスライドがありましたので共有したいと思います。
参考サイト
実践Sass 前編
