Scss の @function を読み込む方法

ライブコーディングを見ていると、rem() をフォントサイズに書いているのをよく見かけてた。

こういうやつです。

  font-size: rem(40);

まぁ、そのまま入力してもなんの変化もないんですけど。

勇気を出して「それはどうやって出るのですか？」と聞いた参加者の方もいたんだけど、「設定でそうなるようになってます。」との説明。

「いやいや、どうやって設定したら出るのか知りたいんですよ！教えてくださいよ。」と愚痴りたくもなったが、「講座を受けたら分かるよ。」って感じだったし、私には先立つものがなく講座受講は無理なので諦めてた。

今日、それを解決できたのでメモ。

rem() を入力して使えるようにする

まず、これはなんなのか。

これは px(ピクセル) を rem に変更する関数である。

// scss/global/tools/_function.scss に保存する。
@function rem($arg) {
  @return calc($arg / 16 * 1rem);
}

で、この関数を使いたいのだけれど、読み込めない…。
これからしばらく沼る。

他のSCSSと同じように読み込む

ネットで情報を探してたんだけど 結局これだった。

上のコードは

使うファイルには以下のコードを書く。

@use "../global/forward" as forward;

ちなみにすべての scss ファイルを global に配下にある forward で読み込んでいる。

@forward "tools/function";

rem() を使う

以下のコードで関数を読み込む

@use "../global/forward" as forward;

使うときには以下のように書く。

.MVTextMain {
  font-size: forward.rem(40);
}

これで、3か月間の疑問が消えました。