index.html
このファイルに書かれたものがブラウザに表示されます。
style.css
htmlファイルでstyle.cssファイルを読み込むことでスタイルを適用させます。
style.cssファイルを直接編集するのではなく、sassコマンドを実行することでstyle.cssファイルを作成・更新します。
stylesheetsフォルダ
すべてのscssファイルを管理するフォルダです。
scssファイルを追加する場合は、stylesheetsフォルダ内に作成します。
style.scss
このファイルですべてのscssファイルを@importで読み込むことで、一つのsassファイルに統合します。
【例】@importを使用してscssファイルを読み込みます
@import "reset"; /*_reset.scssを読み込む */
@import "./config/XXXX"; /* configフォルダの中の_XXXX.scssを読み込む */
_reset.scss
ブラウザによって初めからcssがそれぞれのhtmlに設定されています。
そのCSSによって、意図しないデザインになってしまうことがあります。
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットします。
HTML5 Doctor Reset CSS 2.0
sanitize.css
などがあります。
configフォルダ
プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダです。
mixinフォルダ
scss内で使用するmixinファイルを管理するフォルダです。
modulesフォルダ
モジュールを管理するためのフォルダです。
モジュールとは、いくつかの要素をまとめた部品の集合という意味です。
ヘッダー、フッターのような用途ごとに分けることができます。
モジュールを使うことでまとまったCSSを独立したものとして管理することができます。
vendorフォルダ
ライブラリのファイルを管理するフォルダです。
ライブラリとはあらかじめCSSが書かれたファイルです。
overrideフォルダ
vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダです。