【Sass】@importは廃止！@use の基本的な書き方とベストプラクティス

はじめに

こんにちは、システムエンジニアの @cao19x です。この記事では、Dart sass が提供する @use の基本的な使い方をご紹介します。
まだ@import を使っている方、@useを聞いたことがあるがよくわからない方、これから@useを使ってみたい方 などが対象読者となっています。

[toc]

今までの @import (公式により非推奨)

@import は、公式で廃止予定であることが明言されており、「遅くとも2021年10月1日には非推奨」、「遅くとも2022年10月1日にサポート終了」予定となっています。そのため、Sass を新しい環境に適した記法に改修していく必要があります。

主なデメリット

@import が廃止されると言うことは、何かしらのデメリットがあると言うことですが、具体的に何がだめだったのでしょうか?
これは、デバックが困難 であることが大きな要因としてあげられます。

以下のコードを例に見てみましょう。

card クラスの 背景色 に $gray-300 を指定しています。
@import で読み込んでいるスタイルシートが 3つありますが、$gray-300 はどのスタイルシートで定義された変数なのかを知ることはできません。

@import '../styles/bootstrap/piyo';
@import '../styles/bootstrap/hoge';
@import '../styles/bootstrap/fuga';

.card {
    background: $gray-300; // importされた fileのうち、どこで定義された変数なのかがわからない！
}

上記のような デメリットを補完する形で生まれたのが @use になります。

@useの使い方

Sass変数の定義

• /styles/_variables.scss

  $gray-300: darken($light, 5%) !default;

variables file に$gray-xxx などの、グレー系カラーの変数を定義しているファイルがあるとします。

✅ variables file で定義された変数を使用

上記で定義されたグレー系カラーを実際に使用するには、以下の3ステップで使用できます。

1. @use '../styles/_variables.scss; のように「@use + fileへのパス」 とすることで、ファイルの読み込みをする

2. variables.$gray-300 のようにしてスタイルを指定

       @use '../styles/variables';
       @use '../styles/bootstrap/piyo';
   
       .card {
           background: variables.$gray-300; // $gray-300 は　variables file で定義されていることがわかる
                                                  //　@useを使えば nsの役割を持つので、デバッグしやすい！
         }

• ちなみに、namespace は as 修飾子を使うことで変更することができます。

  @use '../styles/bootstrap/variables'  as var;
  
      .card {
          background: var.$gray-300;
    }

@use におけるベストプラクティス

前提として、@use でできることは主に以下の2つがあります。

① @use によるスタイルシートへのアクセス
② アクセスしたスタイルシート内で指定されているスタイルの適用

上記を抑えた上で、問題点もあります。
それは、「@use で読み込むファイル内に スタイルを適用するようなコード が含まれている場合そのスタイルが適用されてしまう」という点です。

よくわからないと思うので、以下を例に見てみましょう。

【例】.subnavbar の背景色指定に、nav-bar.scss にある Sass 変数を使いたい

アクセスされる側のスタイルシートで、navbar の 背景色を yellow と指定しても、アクセスする側のスタイルシートで、 navbarの背景色をblue と記述すれば、 後に読み込まれる方の指定が上書きされてしまいます。

• アクセスされる側のスタイルシート

  • /box.scss

  $bgcolor-box: yellow;
  $textcolor-box: red;
  
  .box  {
    background: $bgcolor-box; // このスタイルシートを読み込んだ時点で、このスタイルが適用される。ここでは黄色。
  }

• アクセスする側のスタイルシート

  • /example.scss

  @use './box ';
  
  .box  { // これがアクセスされる側にある .box  {} を上書きしてしまう。青色になる。
    background: blue;
  }

よって、理想は以下のコードように @use で読み込むファイルの中は、参照のためだけのものに絞り、スタイルを適用するコードは書かないようにすることがベストプラクティスだと言えるでしょう。

• /box.scss

  // 定義のみを記載
  $bgcolor-box: yellow;
  $textcolor-box: red;

まとめ

・@import は2022年で廃止される
・@import のデメリットを補完する形で生まれたのが @use
・@use は namespase の役割を持つのでデバッグしやすい
・@use で読み込むファイルの中は、参照のためだけのものに絞り、スタイルを適用するコードは書かないようにする

最後まで読んでいただきありがとうございました！