More than 1 year has passed since last update.

@importが非推奨になった今、sassでパーシャルファイルを読み込むには、どうするのが正解なのか？

Last updated at 2023-05-04Posted at 2023-04-20

前提

2022年10月1日に@importが非推奨になりました。
パーシャルファイルを読み込む時に、何を使えばいいのか、情報を整理した備忘録です。

@importの代替には@use(Sass 3.10以上のバージョン)と@forward(Sass 3.5以上のバージョン)が推奨されています。

ただ読み込むだけなら@useを使いましょう。

ただし、@mixinやfanctionを使っている場合には@forwardを使いましょう。

@useや@importを調べた時、公式ドキュメント等にはグローバル関数だの、カプセル化だの出てくることが多かったです。

で、関数を使いまわしたりしたいときはどうすればいいんだと迷いました。

使いたい関数を1つのパーシャルファイルにまとめて、使いたいsassファイルの先頭で@useを使って読み込むようにしましょう。

例えば_functions.scssというパーシャルファイルを作って、使いまわしたい関数をそこに書き込んだ場合、使いたいsassファイルの先頭には以下のように記述すれば関数が使えます。

@use 'functions';

私はvwの計算が非常に苦痛なのですが、その計算を勝手にしてくれる関数を作って使いまわしたいです。
なので、関数をまとめて書いておくパーシャルファイル_functions.scssを作って、以下を記述してます。

$artboardWidth : デザインカンプのアートボードの画面幅;
@function vw($pixelsVw) {
    @return calc(#{$pixelsVw} / #{$artboardWidth} * 100vw);
}

そして、使いたい時には以下のように記述して活用してます。

@use 'functions';


.foo {
    margin: vw(20) 0 0 0;
}