目次
FLOCCSにおけるSassファイルの階層構造
この記事で紹介する内容はFLOCCSで使うことが前提の技術です。
FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別にファイルを分けてパーツ化することにより効率的にコーディングを行うことができます。もちろん、保守性も劇的にアップします。オススメです。
FLOCSSのSassファイルの全体構造は別記事にまとめますので、そちらを参照願います。
あわせて読みたい
FLOCSSのSassファイル構成と書き方のコツ｜CSS設計の効率化
この記事では私が使っているFLOCSSのファイル構成と書き方を紹介します。 FLOCSSのフォルダー構成 私がFLOCSSで普段使っているフォルダー構成を以下に載せておきます。 ...
ここではFLOCSSファイル構造の中からブレークポイント設定に関係するSassファイルの構造のみを抜粋しました。
sass
├── global
│ ├── _forwards.scss //@forwordをまとめたファイル（ブレークポイント関数や色関数など）
│ └── mixin
│ └── _breakpoint.scss //ブレークポイント設定ファイル
└── layout
└── _l-main.scss //ブレークポイントを実際に使うファイルの一例
レスポンシブを実行するのに必要なファイルをまとめたのが、下記です。
必要なファイル
- _breakpoint.scss：レスポンシブを関数化したファイルでsass>global>mixinフォルダに格納する
- _forwards.scss：@forwordをまとめたファイル（ブレークポイント関数や色関数など）でsass>globalフォルダに格納する。
- 関数を使うscssファイル：上記関数を使うscssファイル全部の冒頭に特定の記述が必要です（この記事では、_l-main.scssファイルを例に説明します）。
以下に、上記ファイルの記述例を解説付きで紹介していきます。
_breakpoint.scssファイルの記述例
下の記述例では、レスポンシブのブレークポイントをスマホ、タブレット、PCの３種類で設定しています。
- スマホ：max-width: 767px
- タブレット：max-width: 1023px
- PC画面：min-width: 1024px
/*----------------------------------------------------------*/
// メディアクエリ設定
/*----------------------------------------------------------*/
$breakpoints: (
"sp": "screen and (max-width: 767px)",
"tab": "screen and (max-width: 1023px)",
"pc": "screen and (min-width: 1024px)",
);
// mixinを定義する（初期値はsp）
@mixin mq($breakpoint: sp) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}_forwards.scssファイルの設定
上で設定したブレークポイント関数が書かれたファイルを「_forwards.scss」に@forwordで一旦読み込みます。読み込みは相対パスで書きます。
@forward "./mixin/breakpoint";蛇足ですが、この時に他にも読み込みたい関数がある時は一緒に読み込みます。例えば、普通は色を設定した関数ファイルを作りますが、このファイルも下記のように@forwordで一緒に読み込みます。
@forward "./setting/color"; //色の設定関数の書かれたファイル
@forward "./mixin/breakpoint"; // ブレークポイントの設定関数の書かれたファイル＊Sassによる色の関数化は以下の記事にまとめたのでご参照願います。
あわせて読みたい
【Sass｜＠use】色を関数化してコーディングを効率化する方法【FLOCCS】
色の関数化に関係するFLOCCSのSassファイル構造 この記事で紹介する内容はFLOCCSで使うのが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目...
@useでブレークポイント関数を使うscssファイルの記述例
ここでは「_l-main.scss」を例に記述例を紹介しますが、実際はCSSを書くすべてのscssファイルの冒頭に同様の@useの記述を書きます。
@charset "UTF-8";
@use "../global/forwards" as fw;
// ------------------------------------------
// sectionタグ
// ------------------------------------------
.l-section {
padding: 40px 40px 120px;
@include fw.mq("tab") {
padding: 32px 32px 90px;
}
@include fw.mq("sp") {
padding: 20px 20px 75px;
}
}解説
- 冒頭に「@use “../global/forwards” as fw;」のように、関数をまとめた「_forwards.scss」ファイルへの相対パスを「@use “相対パス” as fw;」の形式で書きます。
- セレクターの内側に「@include fw.mq(“ブレークポイント名”) {css設定}」の形式でCSSを記述します。
