dart-sass 採用に伴い scss ディレクトリ構造を考える

2022.04.18 TECH: dart-sass 採用に伴い scss ディレクトリ構造を考える

scss でファイルを呼び出す際に使っていた【@import】は廃止され、代わりに【@use】【@fowerd】を使うように推奨されています。
なので【dart-sass】を採用します、それに伴って scssディレクトリ構造 や ファイルの紐付け に関してをルール化しようと思います。

dart-sass

環境準備

私は通常、指定がない限りタスクランナー(gulp)を使用して構築しています。
gulp を使用する場合であれば【gulp-dart-sass】【gulp-sass-glob-use-forward】各々のパッケージをインストールする必要があります。

gulp-dart-sass

gulp-sass-glob-use-forward

npm i --D gulp gulp-dart-sass gulp-sass-glob-use-forward

基本ディレクトリ構造図

scss ディレクトリ
　┣━ style.scss
　┣━ global ディレクトリ
　┃　　┣━ _index.scss
　┃　　┣━ _mixins.scss
　┃　　┗━ _valiables.scss
　┣━ common ディレクトリ
　┃　　┣━ _index.scss
　┃　　┣━ _reset.scss
　┃　　┣━ _common.scss
　┃　　┣━ _animation.scss
　┃　　┣━ layout ディレクトリ
　┃　　┃　　┣━ _index.scss
　┃　　┃　　┣━ _header.scss
　┃　　┃　　┃　　：パーツ毎のレイアウト設定ファイル
　┃　　┃　　┗━ _breadcrumb.scss
　┃　　┣━ utility ディレクトリ
　┃　　┃　　┣━ _index.scss
　┃　　┃　　┣━ _space.scss
　┃　　┃　　┃　　：プロパティ(カテゴリ)毎の設定ファイル
　┃　　┃　　┗━ _font.scss
　┃　　┗━ component ディレクトリ
　┃　　　　　┣━ _index.scss
　┃　　　　　┣━ _button.scss
　┃　　　　　┃　　：パーツ(カテゴリ)毎の設定ファイル
　┃　　　　　┗━ _title.scss
　┗━ page ディレクトリ
　　　　┣━ _index.scss
　　　　┣━ _top.scss
　　　　┃　　：
　　　　┗━ _about.scss

上記はディレクトリ構造の一例となります。
『全ての案件をこのような構造にすべき！』ということではなく、『これをベースに案件の規模や特性に合わせて、カスタマイズするように運用しましょう！』っという指針です。

各ディレクトリ格納ルール

global ディレクトリ

scss 構造全てに影響を与える関数・変数を定義するファイルを格納します
※ブレイクポイント・各変数定義などが該当になります

_mixins.scss＠ブレイクポイント定義ファイル

$sp: 814px;
$tablet: 1160px;

@mixin tablet {
  @media (max-width: $tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp) - 1) {
    @content;
  }
}

_valiables.scss＠変数定義ファイル

/* themeColor
-----------------------------*/
$theme-color:rgba(68,160,174,1);
$theme-color-alpha10:rgba(68,160,174,.1);

/* fontFamily
-----------------------------*/
$font-jp:'Noto Sans JP',sans-serif;
$font-en:Century Gothic;

common ディレクトリ

サイトを通して使用される共通パーツ設定を格納するディレクトリで、ディレクトリ・ファイルは更新性を考慮して、細分化して管理します

_reset.scss＠共通リセットファイル

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
hr{
  display:none;
}

_common.scss＠共通ベース定義ファイル

@use "../../global" as g;

body{
  font-size:16px;
  color:#0f3232;
  font-family:g.$font-jp;
  width:100%;
  -webkit-font-smoothing:antialiased;
  background:#f4fbfc;
  @include g.sp() {
    font-size:14px;
  }
}

_animation.scss＠共通アニメーション定義ファイル

.p-visual-top::after{
  right:100%;
  animation:slideBg-arrow .75s 0s 1 forwards;
}
@keyframes slideBg-arrow{
  0%{right:100%;}
  100%{right:50%;}
}

layout ディレクトリ

接頭辞【l-】から始まる共通レイアウト(主に大きな括りのブロックレイアウト)に関するモジュールファイルを格納するディレクトリで、header・breadcrumb・footer などのように、各パーツ毎に細分化して管理します

@use "../../global" as g;

.l-box{
  padding:0 0 100px;
  width:1100px;
  @include g.tablet() {
    width:94%;
  }
  @include g.sp() {
    padding:0 3% 3.5em;
    width:auto;
  }
}

utility ディレクトリ

接頭辞【u-】から始まる最小粒度(Atomic Design でいうところの『原子(Atom)』)のモジュールパーツを定義するファイルを格納するディレクトリで、font・list・border・background などのように、各カテゴリ毎に細分化して管理します

.u-flex{
  display:flex !important;
}
.u-flex-center{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.u-flex-between{
  display:flex !important;
  justify-content:space-between !important;
}

component ディレクトリ

接頭辞【c-】から始まるパーツモジュール(Atomic Design でいうところの『分子(molecule)』)を定義するファイルを格納するディレクトリで、title・button・label・slider などのように、各パーツ毎に細分化して管理します

@use "../../global" as g;

.c-title-large{
  font-size:36px;
  font-weight:400;
  font-family:g.$font-en;
  color:g.$theme-color;
  @include g.sp() {
    font-size:24px;
  }
}

page ディレクトリ

接頭辞【p-】から始まる各画面(もしくは各コンテンツ)に使用するユニーク設定に関しては、このディレクトリに格納します
ファイルは1画面(もしくは1コンテンツ)毎に1ファイル
ファイル名は、管理・更新しやすいように画面名(もしくはコンテンツ名)
例) _top.scss ＠トップページ用設定ファイル

@use "../global" as g;

.p-box-access{
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  @include g.sp() {
    display:block;
  }
  figure{
    width:47%;
    @include g.sp() {
      margin-bottom:1em;
      width:auto;
    }
  }
}

各ファイル繋ぎこみ方法

読み込みをするファイル側から、全ての scssファイルを @use しなくても済むように、各ディレクトリには _index.scss を設置します
そうすることで読み込む際に、ディレクトリを指定するだけで済むのと、構造が把握しやすくなるというメリットがあります

各 _index.scss

各 _index.scss ファイルは、下記のように同じディレクトリ内ファイルへの @forward を設定します

@forward "header";
@forward "footer";
@forward "common";
@forward "breadcrumb";

各設定ファイル

関数・変数定義をしている『global ディレクトリ』内の関数・変数を使用する場合は、各ファイルから下記のように読み込んで使用する必要があります

@use "../../global";

.l-box{
  width:1100px;
  @include global.sp() {
    width:auto;
  }
}

また、下記のように任意の名前で呼び出すことも、省略することも可能です

@use "../../global" as hogehoge;

.l-box{
  display:flex;
  @include hogehoge.sp() {
    display:block;
  }
}

@use "../../global" as *;

.l-box{
  display:flex;
  @include sp() {
    display:block;
  }
}

まとめ

書き方自体に違いはないので当たり前ですが、実際に作業してみると問題は感じませんねw
細分化することで改修・修正の際に生じる『作業前の調べる無駄な時間』が、かなりカット出来ます。

ディレクトリ構造も小規模案件などでは、ここまで細分化する必要はないかもですが、基本的なモジュールなどは違う案件でも、そのまま使えるように設計しておくことで、工数自体の圧縮が望めますし、別作業者によるクオリティ差なども、かなり抑えることが見込めると思います。
様々な css設計手法・フレームワーク の良いところのみを自分なりに抜き出して、ルール化することで、極論『使い易い独自フレームワークを作成して、少しでもラクしようぜぃ！』って、ことですね。

もちろんラクするためには…
それなりの努力・探求心・向上心が必要になります。。。( •᷄ ̲˒ •᷅ )