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

FLOCSSのファイル構成と書き方のコツのサムネイル

この記事では私が使っているFLOCSSのファイル構成と書き方を紹介します。

目次

FLOCSSのフォルダー構成

私がFLOCSSで普段使っているフォルダー構成を以下に載せておきます。

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

この他にFLOCSSではUtilityフォルダを設けてパーツファイルを格納しています。

Utility

ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。

FLOCSS公式

FLOCSSのSassファイル構成

私が普段FLOCCSで使っているSassファイルの構成を下に載せておきます。

├─ 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 //投稿ページ共通のスタイル
    └─ その他(カスタム投稿など必要に応じて増設していく)

_breakpoint.scssと_color.scssは関数専用のファイルです。それぞれ下記の別記事にまとめましたのでご参照下さい。

_breakpoint.scss | メディアクエリの関数化ファイル

FLOCCSとSassでメディアクエリの関数化するとコーディングが効率化できます。もちろん設定しなくてもFLOCSSは使えますが、使った方が便利です。

あわせて読みたい
【Sass|@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する... FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...

_color.scss |色の関数化ファイル

FLOCCSとSassで色の関数化するとコーディングが効率化できます。色の管理を「_color.scss」一つのファイルで管理できるので、色の修正等への対応が断然楽になります。

あわせて読みたい
【Sass|@use】色を関数化してコーディングを効率化する方法【FLOCCS】 色の関数化に関係するFLOCCSのSassファイル構造 この記事で紹介する内容はFLOCCSで使うのが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目...

ファイル名記述の規則

ファイル名に冒頭に_(アンダーバー)を付ける意味

上のFLOCCSのSassファイル構成で、Sassファイル名の冒頭に「_(アンダーバー)」が付いているのに気づいた方もいると思います。この「_」には意味があります。

// 例
_base.scss

結論から言うと、Sassファイル冒頭に「_」が付くと、そのSassファイルはCSSファイルにコンパイルされなくなります。

この記事で紹介したFLOCCSのSassファイル構成では、一番上の「style.scss」のみが「_」無しでCSSへのコンパイルが許されています。

// 例
style.scss

何故かというと、FLOCSSではパーツ化したSassファイルを「style.scss」でまとめて読み込むため、結果的にCSSのコンパイルは「style.scss」のみで良いからです。

ファイル名の接頭辞のルール|l-やc-やp-

layoutフォルダーに格納されたファイルには接頭辞に「l-」を、componentフォルダーに格納されたファイルには「c-」を、projectファイルに格納されたものには「p-」を付けます。

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

同様に、それに関わるクラス属性にも「l-」、「c-」、「p-」を付ける。

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

style.scssへのSassファイルの集約と記述例

FLOCSSでは作ったSassパーツファイルを「style.scss」にまとめて読み込みます。

「style.scss」のstyleの部分は別の半角英数字でも構いません。

以下の「style.scss」の記述例を載せておきます。

@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";

各パーツファイルの読み込みは@useを使います。使い方は下記のとおりです。

@useでのSassファイル読み込み

@use “Sassパーツファイルへの相対パス“;

// 例
@use "../sass/foundation/reset";

なお、各パーツSassファイルへの相対パスはフォルダー構成によって変わりますので間違えないようにして下さい。

関数Sassファイルの使い方

上の方で少し触れたSassの関数専用ファイル(色やメディアクエリのブレークポイント)は、「style.scss」に読み込まずに、一旦、_forwardsファイルに@forwardで集約してから、各パーツSassファイルの冒頭で読み込みます

_forwardsファイル

_forwardsファイルの記述例

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

の中身は各関数Sassファイルへの相対パスです。フォルダー構成により変化しますので、ご注意下さい。

各パーツSassファイル

各パーツSassファイルの冒頭には下記のように記述して関数ファイルを読み込みます。

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

の中身は_forwardsファイルへの相対パスです。フォルダー構成により変化しますので、ご注意下さい。

assの関数専用ファイルについての詳細は、下記の参考記事をご参照下さい。

あわせて読みたい
【Sass|@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する... FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...
あわせて読みたい
【Sass|@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する... FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

■清水WEB制作代表
■コーディング:WordPress(オリジナルテーマ制作等)・HTML・Sass・FLOCSS・JavaScript(jQuery)等
■集客力:YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成:博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術:Amazon Kindle出版で、写真集・撮影編集解説書を5冊好評発売中です

目次