コフス技術ブログ

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

数が多くなり、見通しが悪くなったり・メンテナンスしづらくなった時は積極的に分割するといいでしょう。