North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
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設計手法・フレームワーク の良いところのみを自分なりに抜き出して、ルール化することで、極論『使い易い独自フレームワークを作成して、少しでもラクしようぜぃ!』って、ことですね。

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

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001