オジサンの業務メモ：dart-sassに移行するにあたり＠importと@use(@forward)の違いをざっくりとまとめてみる

毎度のことながら、オジサンはマークアップエンジニアである。 オジサンのお仕事は単にデザインデータをHTMLに起こすだけにとどまらず、 運用フェーズ移行後も更新が容易になるよう、あらかじめコーディング規約やCSS設計を行い、運用チームに引き渡すのも仕事に含まれている。

そんなオジサンであるが、ScssでCSSを書かない日はほぼ無いと言っても良いくらいである。 そして最近将来的な事を見据えて、Scssのコンパイルで使用しているnode-sass(LibSass)からdart-sassに移行することにした。 dart-sassに移行する上で細かい注意点は色々あるのだが、移行の壁である、@import から @use(@forward)への移行について業務用メモとして記事を残すことにした。 同様の悩みをもつマークアップエンジニア諸兄のお役に立てれば幸いである。

@importのメリットデメリットについて考えてみる

Sass(Scss)に於いてモジュール単位で分割したSass(Scss)ファイルを@importディレクティブで呼び出し、結合できる機能である。 呼び出し元のファイル内にあらかじめ定義された変数やミックスインがあった場合はそれらを呼び出し先のファイル内で自由に呼び出せるのである。 ただし欠点として、変数やミックインは基本グローバル扱いなので読み込みさえすればどこからでも呼べてしまうし、同名の変数やミックスインがあった場合、容易に上書きできてしまう側面もあったのである。

@import “variables”;
@import “mixins”;

@import “component”;
// component内でも上記のvariablesやmixinsで
// 定義されたものを利用可能

.foo {
    color: $white;
}

[:contents]



[:contents]

@use(@forward)のメリットデメリットを考えてみる

@importと@useの違いだが、＠importの場合、呼び出しさえすれば呼び出し元の変数やミックスインが自由に使えたのに対し、@useの場合は呼び出し元の変数やミックスインを呼び出すにはその呼び出し元ののファイル名を「名前空間」として明示しなければコンパイル時にエラーになってしまう点である。 名前空間を使うメリットとして、名前空間を明示し呼び出し元を明示することで変数名の衝突や上書きを防げるといったメリットがある。

@use “variables”;

.foo {
    color: variables.$white;
}

名前空間の名称についてはファイル名をそのまま使用するのは冗長になり、記述ミスにもつながる。 そういった事を考慮しているのか名前空間については呼び出しの際にas節を使うことで任意の名称を設定することが可能である。

@use “variables” as var; //  任意で名前空間を指定

.foo {
    color: var.$white;
}

デメリットとしては、変数/ミックインファイルに名前空間を指定しなければいけないのがやや手間な所と@importでは変数/ミックインファイルが読み込まれてさえすれば、それ以下で呼び出すファイル内でも無条件で変数/ミックインが呼び出せていたのに対し、＠useでは変数/ミックインを使いたい場合は各ファイル毎に変数/ミックインファイルを＠useで都度呼び出す必要があるのでこれも非常に手間に感じる。 だがしかし、変数の上書きや衝突を防ぐという観点で考えた場合、呼び出し元を明示し、かつ使用するファイルで都度呼び出すのは不具合が発生した場合、原因を特定しやすく、ソースの見通しが良くなったとも言える。

@forwardの使い方

@forwardとはその名の示す通り呼び出すファイルをその他のファイルに転送したい時などに使用する。

例えば、変数ファイル「variables」とミックスインファイル「mixins」を style.scssに呼び出す場合、以下のようにそれぞれ呼び出し、それぞれ名前空間を付与するのはメンテナンスの観点からすると非効率である。

@use “variables” as var;
@use “mixins” as mx;

.foo {
    color: var.$white;
    @include mx.bar();
}

このようなケースの場合、読み込むファイルをひとまとめにし、@forwardを使うと 呼び出しの際に名前空間を一回定義するのみで済むので効率的である。

// _import.scss
@fortward “variables”;
@fortward “mixins”;

// style.scss

@use “import” as ipt;
.foo {
    color: ipt.$white;
    @include ipt.bar();
}

最近dart-sassに急遽移行する業務があり、手探りながらもオジサンなりの知見をまとめてみた。

同じようにdart-sass移行にあたり、悩んでいるマークアップエンジニア諸兄の少しでもお役に立てれば幸いである。