@forwardルールは対象ファイルに書かれてる内容を現在のファイルAにすべて取り込みます。つまり現在のファイルAを@useして使う場合@forwardしてきたファイルの内容も使えることになります。
JavaScript エンジニアな人なら`export * from '...';のようなものだと考えると分かりやすいかもしれません。
使い方は単に@mixinなどをまとめて定義したファイルのパスに対して@forwardするだけです。
@forward "mixins/button";
@forward "mixins/link";
別名
mixins/_button.scssの中身がこんな感じだとします。
@mixin text {
color: orange;
}
もし、textという名前の Mixin がmixins/linkでも定義されていて被るのを避けたい時、asと続けて別名を定義することで回避できます。
@forward "mixins/button" as button-*;
@forward "mixins/link" as link-*;
これでmixins/buttonのtextはbutton-text、mixins/linkではlink-textという名前で取り込まれます。
カスタマイズして取り込み
@useのように内部で定義した!defaultを付けた変数を取り込み時に上書きできます。
@forward "mixins/button" with ($color: orange);
また違いとしてこちらはwithの中でも!defaultが使えます。これにより上位モジュールから更に変更可能になります。
@forward "mixins/button" with ($color: orange !default);
一部だけ取り込み
showとhideを続けると取り込む要素を絞り込めます。showは指定した要素だけ、hideは指定した要素以外という意味の違いがあります。
@forward "mixins/button" show $new-color, new-text;
@forward "mixins/button" hide $old-color, old-text;
