mixin.scssを各@mixin単位でファイル分割
大量の@mixin
が纒められたmixin.scss
を、各@mixin
単位でファイル分割する際の手順です。
以下ファイルがあった時を想定します。
index.scss
@use "./Foundation/mixin" as *;
Foundation/_mixin.scss
@mixin hoge1() {}
@mixin hoge2() {}
// ...省略
@mixin hoge100() {}
この時、Foundation/_mixin.scss
内の各@mixin
をファイルで分割するには@forward
を使い、分割した各mixinファイルを読み込みます。
Foundation/_mixin.scss
@forward "mixins/hoge1";
@forward "mixins/hoge2";
// ...省略
@forward "mixins/hoge100";
Foundation/mixins/_hoge1.scss
@mixin hoge1() {}
Foundation/mixins/_hoge2.scss
@mixin hoge2() {}
Foundation/mixins/_hoge100.scss
@mixin hoge100() {}
参考:https://sass-lang.com/documentation/at-rules/forward
数が多くなり、見通しが悪くなったり・メンテナンスしづらくなった時は積極的に分割するといいでしょう。