Sassではパーシャルを使うことでscssファイルを分割して管理できる。役割ごとにファイルを作成したり、同じ役割のファイルをフォルダにまとめることでより管理がしやすくなる。
Saasを使用するフォルダ構成例
index.html
HTMLを記述するファイル。
このファイルに書かれたものが実際にブラウザに表示される。
style.css
style.cssは、htmlファイルでこのファイルを読み込むことでスタイルを適用させる。
style.cssファイルを直接編集するのではなく、sassコマンドを実行することでstyle.cssファイルを作成・更新する。
stylesheetsフォルダ
stylesheetsフォルダは、すべてのscssファイルを管理するフォルダ。
scssファイルを追加する場合は、styelsheetsフォルダ内に作成。
style.scss
このファイルですべてのscssファイルを@importで読み込むことで、一つのsassファイルに統合できる。
_reset.scss
ブラウザによって初めからcssがそれぞれのhtmlに設定される。
そのCSSによって、意図しないデザインになってしまうことがある。
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットする。
このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSとう。
有名なリセットファイルは以下のようなものがある。
configフォルダ
configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダ。
mixinフォルダ
mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダ。
modulesフォルダ
modulesフォルダはモジュールを管理するためのフォルダ。
モジュールとは、いくつかの要素をまとめた部品の集合という意味。
ヘッダー、フッターのような用途ごとに分けることができる。
モジュールを使うことでまとまったCSSを独立したものとして管理することができる。
vendorフォルダ
vendorフォルダは、ライブラリのファイルを管理するフォルダ。
cssにはライブラリと呼ばれるものがある。
ライブラリとはあらかじめCSSが書かれたファイル。
有名なCSSのライブラリでは、bootstrapがあげられる。
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がる。
overrideフォルダ
overrideフォルダは、vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダ。