【コピペ用】余白用のutilityクラスをSCSSでスタイリッシュに作成する

スタイルシートは少し冗長になりますが、この程度は大丈夫だろうという安易な試算になります。（数字を変えれば多少コンパクトにはなると思うので任意に変更してご利用ください）

用途

SASSでコーディングする際、固定値余白をutilityフォルダ内の.u-プレフィックスから始まるutilityクラスでHTML上に記述できるように設定しています。HTML上で調整できるので直感的に操作できる点が魅力です。

FLOCSSではCSSを細かなファイルに分割してスタイルを記述していくため、編集時に該当ファイルを開いて、編集して、コンパイルするといった手間が発生します。もちろんコンパイルは自動化しているので全体としては小さなことかもしれません。

ただ、個人的にはかなり頻繁に発生する作業でして、特に該当ファイルを開く作業が面倒なので、utilityクラスに固定値を設定してHTML上で管理するのが好ましいのではないかと考えています。

//例｜上部に50pxのマージンを作成
<dic class="p-cta u-mt50">
...
</div>

utilityクラス

ここでは、utilityクラスをFLOCSSのutilityフォルダ内で管理している.u-のプレフィックスから始まる汎用性のあるクラス群としています。.u-tcでtext-align: center;を設定できるようにする等、コーディングをスムーズに進めていくために役立てています。

コード

まとめ

SASSだとこうしたしたイルをコンパクトに書けるので気に入っています。最近ではTailwind CSSが人気ですが、Webサイト制作の現場ではSASSもまだ現役だと思いますので、参考になったら幸いです。

参考：SASS multiple increment values in @for statement
参考：margins-paddings-sass-mixin