Scss/flocssで自作ユーティリティー color / background-color編

u-bg-grayやu-c-primaryなど「u-c」及び「u-bg」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

カラー名で設定できること

前提

foundation/variable

$colors: (
  primary: #F48C40,
  danger: #E88E7D,
  info: #00B187,
  secondary: #E88E7D,
  success: #00B187,
  warning: #ffc107,
  black: #000000,
  white: #ffffff,
  gray: #CCCCCC,
);

使用法

color設定

.u-c-{$colors}

background-color設定

.u-bg-{$colors}

パラメータ

{$colors}は、上記前提を参照

使用例

<div class="u-b-primary u-bg-gray u-c-primary u-mt-50 u-mx-auto u-w-80p u-py-40">
・・・
</div>

他のユーティリティーと組み合わせ上記のようなclassを設定すると下記のようになります。上記classは視認性のため、abc順で記載しています

u-b-primary：div要素が1pxの#F48C40のボーダーで囲まれる
u-bg-gray：background-colorが#CCCCCC
u-c-primary：div要素内のテキストの色が#F48C40
u-mt-50：margin-topが5rem
u-mx-auto：margin-inlineがauto
u-w-80p：widthが80%
u-py-40：padding-blockが4rem

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

color設定

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Color
// -----------------------------------------------------------------
.u-c {
  @each $key, $color in $colors {
    &-#{""+$key} {
      color: $color !important;
    }
  }
}

background-color設定

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Background Color
// -----------------------------------------------------------------
.u-bg {
  @each $key, $color in $colors {
    &-#{""+$key} {
      background-color: $color !important;
    }
  }
}

解説

今回の設定はそれほど複雑ではないので、公開のみとさせていただきます

まとめ

以上でcolor及びbackground-colorのユーティリティーの完成となります

全設定が吐き出されてしまうと膨大な量になってしまいますが、弊社では、vite＋@fullhuman/postcss-purgecssなどを使って、余計なclassは入らないようにしていますので、そういった工夫も必要になるかと思います

コーディングの省力化に貢献できれば幸いです

文責：フライング・ハイ・ワークス代表松田治人（まつだはるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。