目次
色の関数化に関係するFLOCCSのSassファイル構造
この記事で紹介する内容はFLOCCSで使うのが前提の技術です。
FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別にファイルを分けてパーツ化することにより効率的にコーディングを行うことができます。
FLOCSSにおけるSassファイルの全体構造は別記事にまとめますので、そちらを参照願います。
あわせて読みたい
FLOCSSのSassファイル構成と書き方のコツ｜CSS設計の効率化
この記事では私が使っているFLOCSSのファイル構成と書き方を紹介します。 FLOCSSのフォルダー構成 私がFLOCSSで普段使っているフォルダー構成を以下に載せておきます。 ...
ここではFLOCSSファイル構造の中から色の関数化に関係するSassファイルの構造のみを抜粋しました。
Sass
├─ global
│ ├─ _forwords.scss // 関数ファイルを@forwordとして一旦まとめるファイル
│ └─ setting
│ └─ _color.scss // 色を関数化するファイル
└─ layout
└─ _l-header.scss // 関数化した色の使用例としてのファイル色の関数化に使うファイルをまとめたものが下記です。
色の関数化に必要なファイル
- _color.scss：サイトで使う色を定義・関数化する。
- _forwords.scss：上記の色の関数ファイルやその他の関数ファイル（メディアクエリ等）を@forwordとして一旦まとめる。
- 関数化した色を使うscssファイル：例）_l-header.scss
以下に、上記ファイルの記述例を解説付きで紹介していきます。
_color.scss｜色の関数化
_color.scssでは、サイトで使う色を関数化して一括で管理します。下に記述例を載せておきます。
@charset "UTF-8";
// 文字色
$text:#333333;
// 背景色
$bg-white:#F5F5F7;
// 影
$shadow-black:rgba(208,214,223,0.4);
// ボタン・リンク
$btn-blue:#0066CC;
// ホワイト
$white:#fff;
// ブラック
$black:#000;解説
- _color.scssの格納場所：この記事の例ではSass>global>settingフォルダに入れています。
- 色の関数化の方法：「$〇〇:カラーコード;」のように書きます。〇〇部分は任意ですが、分かりやすい半角英数字で書いて下さい。 例）$text:#333333;
_forwords.scss｜関数ファイルをまとめる
_forwords.scssには、＠forwordに続けて、色を関数化したファイルへの相対パスを書きます。他にも関数化したファイルがあれば（例：メディアクエリのブレークポイント等）、同じように書きます。
@charset "UTF-8";
@forward "./setting/color"; //色の関数ファイルへのパス
@forward "./mixin/breakpoint"; //ブレークポイントの関数化ファイルへのパス解説
このファイルに@forwardで書いた関数は、他のsassファイルで読み出して使うことができます。
参考
Sassによるメディアクエリのブレークポイント関数化は以下の記事にまとめましたのでご参照下さい。
あわせて読みたい
【Sass｜@use】メディアクエリのブレークポイントを関数化して、レスポンシブコーディングを効率化する...
FLOCCSにおけるSassファイルの階層構造 この記事で紹介する内容はFLOCCSで使うことが前提の技術です。 FLOCSS(フロックス)とはCSS設計手法の一種で、CSSを使用目的別に...
@useで関数化した色を使う方法
まずは、関数化した色の使用例を下に乗せておきます。
@use "../global/forwards" as fw;
.l-pc-header {
background-color: fw.$bg-white;
box-shadow: 0px 3px 16px fw.$shadow-black;
}解説
- 関数を使いたいsassファイルの冒頭に@use “../global/forwards” as fw;のように、上の説明した_forwords.scssへの相対パスを書きます。なお、fwは任意の半角英数字で書いて良い。
- 上でas fwとしたなら、色の設定は、fw.$〇〇で_color.scssで関数化した色を呼び出すことができる。
- 例）background-color: fw.$bg-white;など
