FLOCSSのSassファイル構成と書き方のコツ｜CSS設計の効率化

├─ css
│ └─ style.scss //すべてのsassパーツファイルをまとめて読み込むファイル
│
└─ sass // sassの機能別パーツファイルを格納
  ├─ foundation // リセットCSSや基本的なスタイル
  │
  ├─ global // 変数、mixin、関数ファイル
  │ ├─ mixin // mixin（メディアクエリ設定など）
  │ ├─ setting // 変数$（カラー設定など）
  │ └─ _forwards.scss //@forwordとして関数をまとめる
  │
  ├─ layout // ヘッダー・メインのコンテンツエリア・サイドバー・フッターのスタイル
  │
  ├─ object //　繰り返し使用されるビジュアルパターン
  │ ├─ component //単一パーツ（ボタン・見出しなど）
  │ └─ project // 複合パーツ（ナビゲーション・記事一覧・画像ギャラリー・ユーザープロフィールなど）
  │
  └─ pages // ページ単位のスタイル（投稿ページ・下層固定ページなど）

├─ css
│ └─ style.scss //すべてのsassパーツファイルをまとめて読み込むファイル
│
└─ sass // sassの機能別パーツファイルを格納
  ├─ foundation // リセットCSSや基本的なスタイル
  │ ├─ _base.scss
  │ └─ _reset.scss
  │
  ├─ global // 変数、mixin、関数ファイル
  │ ├─ mixin // mixin（メディアクエリ設定など）
  │ │ └─ _breakpoint.scss
  │ │
  │ ├─ setting // 変数$（カラー設定など）
  │ │ └─ _color.scss
  │ │
  │ └─ _forwards.scss //@forwordとして関数をまとめる
  │
  ├─ layout // ヘッダー・メインのコンテンツエリア・サイドバー・フッターのスタイル
  │ ├─ _l-footer.scss  //フッターのスタイル
  │ ├─ _l-header.scss  //ヘッダーのスタイル
  │ ├─ _l-main.scss  //mainタグ・sectionタグのスタイル
  │ └─ _l-sidebar.scss  //サイドバーのスタイル
  │
  ├─ object //　繰り返し使用されるビジュアルパターン
  │ ├─ component //単一パーツ（ボタン・見出しなど）
  │ │ ├─ _c-button  //ボタン類
  │ │ ├─ _c-headline  //見出し類
  │ │ └─ _c-info-category  //お知らせ一覧用のカテゴリーアイコン類
  │ │
  │ └─ project // 複合パーツ（ナビゲーション・記事一覧・画像ギャラリー・ユーザープロフィールなど）
  │   ├─ _p-nav.scss //pc用ナビゲーションのスタイル
  │   └─ _p-sp-nav.scss //スマホ用ナビゲーションのスタイル
  │
  └─ pages // ページ単位のスタイル（投稿ページ・下層固定ページなど）
    ├─ 01_home
    │ └─ _front-page.scss //トップページ専用のスタイル
    ├─ 01_page
    │ └─ _page.scss //下層固定ページ共通のスタイル
    ├─ 01_single
    │ └─ _single.scss //投稿ページ共通のスタイル
    └─ その他（カスタム投稿など必要に応じて増設していく）

// 例
_base.scss

// 例
style.scss

例）
  ├─ layout // ヘッダー・メインのコンテンツエリア・サイドバー・フッターのスタイル
  │ ├─ _l-footer.scss  //フッターのスタイル
  │ ├─ _l-header.scss  //ヘッダーのスタイル
  │ ├─ _l-main.scss  //mainタグ・sectionタグのスタイル
  │ └─ _l-sidebar.scss  //サイドバーのスタイル

<header class="l-header">
  <!-- ヘッダー（全ページ共通） -->
  <!-- PC専用ヘッダー -->
  <div class="l-pc-header">
    <div class="l-pc-header-inner">
      <div class="l-header-left_wrapper">

@charset "UTF-8";
// ===============================================================
// use
// ===============================================================

// foundationフォルダ
// リセットCSS
@use "../sass/foundation/reset";
// ベースとなるCSS
@use "../sass/foundation/base";

// layoutフォルダ
// ヘッダーCSS
@use "../sass/layout/l-header";
// フッターCSS
@use "../sass/layout/l-footer";

// メインーCSS
@use "../sass/layout/l-main";
// サイドバーCSS
@use "../sass/layout/l-sidebar";


// projectフォルダ
// グローバルナビ（ヘッダー）CSS
@use "../sass/object/project/p-nav";
// グローバルナビ（ヘッダー:スマホ用）CSS
@use "../sass/object/project/p-sp-nav";

// componentフォルダ
// 見出しCSS
@use "../sass/object/component/c-headline";
// ボタンCSS
@use "../sass/object/component/c-button";
// お知らせ一覧表の情報分類マークのCSS
@use "../sass/object/component/c-info-category";

// ===============================================================
// 各ページのCSS
// ===============================================================

@use "../sass/pages/01_home/front-page.scss";
@use "../sass/pages/01_page/page.scss";
@use "../sass/pages/01_single/single.scss";
@use "../sass/pages/02_service_coding/service_coding";
@use "../sass/pages/03_service_homepage/service_homepage";
@use "../sass/pages/04_works/works";
@use "../sass/pages/05_about/about";
@use "../sass/pages/06_blog/blog.scss";
@use "../sass/pages/07_contact/contact";
@use "../sass/pages/08_other/other";

@forward "./setting/color";  //色の関数化ファイル
@forward "./mixin/breakpoint";  //メディアクエリの関数化ファイル

@use "../global/forwards" as fw;