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

|_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

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

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

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

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

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

@use "../global" as g;

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

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

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

@use "../global" as hoge;

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

@use "../global" as *; //アスタリスクをつける

body {
  @include font-normal; //g.がいらない
  background-color: $color-base; //g.がいらない
}

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

@use "../setting" as s;

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

@use "../setting" as *;

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

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

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

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

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

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

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

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