SASSのディレクトリ構成をまとめました

SASSのディレクトリ構成をまちがった方法で運用していたので、備忘録として記しておきます。
またSASSを学び始めてディレクトリ構成がよくわからない方は、足掛かりとしてこの記事を参考にしてみてください。

ディレクトリ構成の詳細

/assets

├── /css
│   ├── app.css
│   └── app.css.map

└── /sass
├── _base.scss
├── _components.scss
├── _reset.scss
├── _style.scss
├── _var.scss
└── app.scss

sassディレクトリ内にあるsassファイルの接頭辞に_(アンダーバー)がついていますがこれはパーシャルといってファイル分割するとき付けます。
ファイル分割する理由としてはリファクタする際、対象箇所を特定することが容易になる点です。
ただかなりボリュームの少ないLPなんかだとSASSを使用する恩恵は薄れる場合もありますが、今後増築、改修することを考えればSASSで構築してもいいのかなとは思っています。
ここはクライアントとの折り合いも兼ねてよしなにやってください。

上のツリー構造を確認していただくとわかりますが、app.sassだけ接頭辞_(アンダーバー)が付与されていないことがわかります。

このパーシャルされていないファイル内には各パーシャル化したファイルのパスをインポートしています。
このファイルに各ファイルのパスをインポートすることでコンパイルするファイルを一個にまとめることができます。

app.scss

@charset "UTF-8";
@import "./reset";
@import "./var";
@import "./components";
@import "./base";
@import "./style";

ファイル分割の粒度について
ここら辺の話は本題と少しずれてCSS設計の話になってしまうので、一応補足として書いておきます。
パーシャル化するファイルの粒度としては作成するサイト規模によりますが、LP等の小規模だとこの程度の切り分けで十分かなと思います。大規模中規模ではBEMやFLOCSSを用いることが多い。

ファイル名は適宜変更してください。

app.scss ~ パーシャルを一括で読み込むためのファイル(コンパイルするファイル)
reset.scss ~ 初期化ファイル
var.scss ~ 変数、mixinをまとめたファイル
components.scss ~ コンポーネントとして切り分けたもの
base.scss ~ 全体を通して共通してあてているスタイルをまとめたもの
style.scss ~ ヘッダー、メイン、フッター等を記述するファイル(サイトの規模によりこのファイルを更に分割します)

コンパイルしてcssファイルとして吐き出す
scssファイルはコンパイルしないとブラウザには反映されません。
なので、ターミナルからコマンドを実行してコンパイルしましょう。

$ sass app.scss:../css/app.css --style expanded --watch

コマンドの内容はコンパイル対象のファイルを左側に、:(コロン)を挟んで、任意のcssファイル名として吐き出す先を指定している形になります。
ファイル更新するごとに上記コマンドをたたくのは非効率的なので–watchオプションをつけておくと楽です。
–watchオプションをつけることにより永続的に更新し続けてくれます。抜ける場合はCtrl+CでOK。

以上、SASSのディレクトリ構成と運用方法についてでした。


CSS設計について
余談ですが、CSS設計について少し。。
SASSを使うにあたって親和性のある設計を紹介しておきます。

LP、コーポレートサイト、ブログサイト、大規模Webサイト等々様々な規模の案件がありますが、どの規模にも通用するCSS設計はやはりFROCSSだと感じます。

Qiitaの参考記事
https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0


理由① 命名のバッティングが起こらない
やはり普通の設計だと命名のネタ切れが起こります。例えばボリュームの多いセクション内で、共通パーツでないクラスに”description”という命名をつけたとします。
後半同セクションでdescriptionという同じ命名を使ってしまい、同じ命名をされたクラスにいらないスタイルが当たってしまい、レイアウトが崩壊する事態につながります。セレクタを切ることが上記の対策ではありますが、セクション内のボリュームが多い場合、セレクタをいちいち管理していくのがとてもとても面倒です。そのセクション内に共通パーツとして切り分けていない同じ命名のものが存在するだけでお互い干渉する可能性があるため、命名は一意にするべきというのがFLOCSSを使う理由の一つ。

理由② どこに使われているクラスなのか把握しやすい
クラス名に接頭辞を付与することで大枠の切り分けを簡単に把握可能になる。
ここら辺の命名規則は上記に貼ったQiitaの記事がわかりやすいので見を通しておくと良いでしょう。
例えば、FLOCSSではコンポーネントとなるクラスには接頭辞にcを付与します。
隣接セレクタで簡単につけ外し可能となり、ぱっと見でコンポーネントとわかるので可読性が良くなるといったメリットがあります。
他スタイルに干渉しないため、リファクタリングも容易になりみんなハッピーになります。
デメリットとしては、命名が長くなりがちなので記述がダルいということだけかなと。

まとめ
SASS+FLOCSSを正しく使えるようになると、効率的かつカオスな状態にならないので使わない手はありません。
最初のステップであるOOCSSの概念を理解できたらSASS+FLOCSSの学習をおすすめします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です