• 最終更新日:

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

今回はSassの@useと@forwardを使ったサイト設計について説明します。

前提条件

  • 非推奨予定の@importは使わない
  • @useと@forwardを使ったDart Sassを採用

説明環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.57.0
この記事の目次

Sassで@useと@forwardを使ったサイト設計

今後は@importを使ったファイルの読み込みが非推奨になるため、@useと@forwardを使ったDart Sassに切り替える必要があります。

  • @importは遅くとも2021年10月1日には非推奨
  • @importは遅くとも2022年10月1日にサポート終了

さっそくFLOCSSのファイル構成を使って@useと@forwardの使い方を説明していきます。FLOCSS構造やサイト設計については以下を参考にしてみてください。

ファイルとフォルダ構成について

自分なりのFLOCSSでは以下のようにファイルとフォルダを配置しています。

|_sass/
   |- global
   |   |- setting/(変数$を管理する)
   |   |   |- _font-family.scss
   |   |   |- _color.scss
   |   |   |- _index.scss 
   |   |   |- …
   |   |
   |   |- mixin/(mixinの管理)
   |   |   |- _breakpoint.scss
   |   |   |- _animate.scss   
   |   |   |- _index.scss
   |   |   |- …
   |   |
   |   |- _index.scss
   |
   |- foundation/(基本の設定)
   |   |- _base.scss
   |   |- _ress.scss(リセットCSS)
   |   |- _custom-property.scss(カスタムプロパティをまとめている)
   |   |- _index.scss
   |   |- …
   |
   |- layout/(レイアウト部分の管理)
   |   |- _l-header.scss
   |   |- _l-main.scss
   |   |- _l-footer.scss
   |   |- _l-sidebar.scss
   |   |- _index.scss
   |   |- …
   |
   |- component/(最小単位のパーツ)
   |   |- _c-btn.scss
   |   |- _c-link.scss
   |   |- _c-flex.scss
   |   |- _index.scss
   |   |- …
   |
   |- javascript/(JavaScriptによって操作するもの)
   |   |-_js-trigger.scss
   |   |-_js-target.scss
   |   |- _index.scss
   |   |- …
   |
   |- project/(各ページのモジュール管理)
   |   |- _p-home-block.scss
   |   |- _p-main-visual.scss
   |   |- _index.scss
   |   |- …
   |
   |- utility/(調整用)
   |   |- _u-invisible-sp.scss
   |   |- _index.scss
   |   |- …
   |
   |- style.scss

大きなポイントとしては以下。

  • それぞれのフォルダにはすべて_index.scssを配置
  • style.scssでそれぞれのフォルダを一括して読み込む
  • globalフォルダの中に、変数とmixin用のフォルダを配置する

それぞれのフォルダに_index.scssを配置する

_index.scssはそれぞれのフォルダの中にあるSassファイル(パーシャル)を読み込んでいます。例えばfoundationのフォルダの中には以下のSassファイルがあるとします。

  • _base.scss
  • _ress.scss
  • _custom-property.scss

このSassファイルはfoundationの中にある_index.scssで読み込みます。foundationの中で新しくSassファイルを作成した場合は、_index.scssに追記していきます。

/*-- foundationフォルダの中の_index.scss --*/
@use "ress";
@use "custom-property";
@use "base";
//新しくパーシャルを作れば、ここに追記していく

このように_index.scssを使うことで、style.scssでそれぞれのフォルダを一括して読み込むことができます。

style.scssはフォルダごと一括して読み込む

style.scssには今後ファイルが増えても書き加える必要がないように、@useを使ってフォルダごと読み込みます。

フォルダ構成が変わったり、フォルダの数が増えない限り、変更する必要はありません。

@use "foundation";
@use "layout";
@use "component";
@use "javascript";
@use "project";
@use "utility";

globalフォルダの中だけは@forwardで読み込み

globalフォルダの中には変数を管理するsettingフォルダと、mixinを管理するmixinフォルダを配置しています。

|_sass/
   |- global
   |   |- setting/(変数$を管理する)
   |   |   |- _font-family.scss
   |   |   |- _color.scss
   |   |   |- _index.scss 
   |   |   |- …
   |   |
   |   |- mixin/(mixinの管理)
   |   |   |- _breakpoint.scss
   |   |   |- _animate.scss   
   |   |   |- _index.scss
   |   |   |- …
   |   |
   |   |- _index.scss (settingとmixinフォルダを読み込む用)
   |

globalの中にあるファイルは、他のファイルから参照されるため、@forwardを使って読み込む必要があります。

例えば変数をまとめているsettingフォルダについて、以下のファイルがあるとします。

  • _font-family.scss
  • _color.scss

settingフォルダの中にある_index.scssでは以下のように読み込みます。

/*-- settingフォルダの中の_index.scss --*/
@forward "font-family";
@forward "color";

そしてglobalフォルダの直下にある_index.scssではsettingフォルダとmixinフォルダの2つを@forwardを使って読み込みます。

/*-- globalフォルダの直下の_index.scss --*/
@forward "setting";
@forward "mixin";

このように@forwardを使うことで、他のファイルからこのglobalフォルダへアクセスできるようになります。

globalフォルダにある変数やmixinを使うには?

たとえばfoundationの中にある_base.scssで、globalフォルダにある変数やmixinを使う場合は以下のように書きます。

@use "../global" as g;

body {
  @include g.font-normal; //font-normalというmixin
  background-color: g.$color-base; //$color-baseという変数
}

1行目では、どのフォルダにある変数やmixinを使うのか宣言しています。そして使う場合にはgという文字を使って呼び出します。

gを使って呼び出すとは以下のg.の部分になります。

/*-- gを使って呼び出す新しい書き方 --*/
@include g.font-normal;
background-color: g.$color-base;

/*-- いままでの書き方 --*/
@include font-normal;
background-color: $color-base;

gの部分は好きな名前にすることができます。たとえばhogeという名前で呼び出したいのであれば、以下のように書くことができます。

@use "../global" as hoge;

body {
  @include hoge.font-normal; 
  background-color: hoge.$color-base; 
}

mixinフォルダからsettingフォルダを参照する場合は?

globalフォルダの中に位置している、mixinフォルダからsettingフォルダを参照する場合も考えられます。

たとえばsettingフォルダにある_font-family.scssには以下が書かれているとします。

$font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

mixinフォルダの_font.scssから、settingフォルダの_font-family.scssの変数を参照する場合は以下です。

@use "../setting" as s;

@mixin font-normal {
  font-family: s.$font-family;
  font-weight: 400;
}

除算処理(割り算)には / ではなくmath.divを使う

いままで/(スラッシュ)を使っていた除算処理はコンパイルするときにエラーになります。以下は例です。

.div{
   width: (100% / 4); //エラーになる
}

今後は/(スラッシュ)の代わりにmath.divを使います。必ず最初に@use "sass:math";と書くことを忘れないようにしましょう。

@use "sass:math"; //math.divを使う上で必要

.div{
   width: math.div(100%, 4);
}

calcを使うなら/(スラッシュ)を使ってもエラーにならないので、通常はこちらを使ったほうが楽です。

.div{
   width: calc(100% / 4); //エラーにならない
}

mixinでも除算を使っている場合でも同じようにmath.divを使います。
以下のように書いているとエラーになります。

@mixin font-size($size, $base: 16) { //@includeで呼び出したときにエラーになる
  font-size: ($size / $base) + rem;
}

math.divを使って以下のように書き換えることができます。

@use "sass:math"; //math.divを使う上で必要

@mixin font-size($size, $base: 16) {
  font-size: math.div($size, $base) + rem;
}

おわりに

今回はSassで@useと@forwardを使ったサイト設計について説明しました。いままでgulpのglobを使ってSassファイル(パーシャル)を一括で読み込んでいた方にとっては、少々手間になった印象です。

カスタムプロパティを使うのであればsettingフォルダを使わないフォルダ構成も考えられます。@importが非推奨になる前に、Dart Sassを使ったSassの書き方に慣れておきましょう。