Good Morning Web - Ayano's Portfolio -

@importから@useへの移行

Sassの公式サイトには、@import機能を段階的に廃止し、最終的には言語から完全に削除するという注意書きが記載されています。

@importルールはグローバル的であり、定義している変数がどのファイル（ツール）で定義されているかを判断することが難しいのです。仮に、二つのSassファイルで「$color1」という同じ名前の変数を定義してしまった場合、スタイルルールが競合してしまいます。

そして、定義された変数に名前空間（ネームスペース）を与えることのできる「@use」ならそのような問題に対処できるという面から、@importに代わりこれから移行していくという流れです。

@importから@useへのコードの書き換え方法

これまでの従来の@import機能を利用した場合、「@import」の記述のみでそれぞれのファイルの変数、関数、mixinを利用することができました。しかし、@useを利用した場合は、読み込んだ変数などを利用する際、その変数がどのファイルから用いられているかを判断するために、ネームスペースが与えられます。

そのため、@importから@useへ書き換えるほかに、利用したい変数の前に、ファイル名＋ドットを追記する必要があります。

@import "foundation/mixin";
@import "foundation/color";
・
・
・ 

h1 {
  color: $cBlack;
}

.btn {
  @include rounded;
}

@use "foundation/mixin";
@use "foundation/color";
・
・
・

//「_color.scss」で定義されているため、「color.」を変数の前に記述する
h1 {
  color: color.$cBlack;
}

//「_mixin.scss」で定義されているため、「mixin.」を変数の前に記述する
.btn {
  @include mixin.btn-style;
}

ネームスペースは任意の名称に変更することができます。その場合は「as」を記述します。

また、「as *」を記述することで、ネームスペースを記述する必要がなくなり、変数名をそのまま利用することができます。

しかし、ネームスペースを記述する必要がなくなると、@importと同様になり、同じ変数名をもつスタイルルールが競合してしまう可能性がありますので、注意して利用してください。

// それぞれ「m」、「c」という名称に変更
@use "foundation/mixin" as m;
@use "foundation/color" as c;

h1 {
  color: c.$cBlack;
}

.btn {
  @include m.btn-style;
}

// 「*」とし、ネームスペースを記述しない場合
@use "foundation/mixin" as *;
@use "foundation/color" as *;

h1 {
  color: $cBlack;
}

.btn {
  @include btn-style;
}

@forwardを活用する

@useへの書き換え方法は理解できましたが、グローバル設定など読み込みたいファイルが複数ある場合、毎度@useで何行も記述したり、ネームスペースを書き分けるのは大変です。そこで、複数のSassファイルをまとめるために「@forward」を使います。

まずは、@useのみで読み込んだSassファイルの例です。

@use "../foundation/variables";
@use "../foundation/mixin";
@use "../foundation/colors";
@use "../foundation/reset";

header {
width: 100%;
height: variables.$headerHeight;
background-color: colors.$cBlue;
padding: reset.$padding;
 @include mixin.mq(md) {
   background-color: colors.$cYellow;
  }
}

それぞれの変数の前に名称を付けると記述量が増え、ミスも起こりやすくなります。
そこで、グローバルスタイルをまとめているフォルダに「_import.scss」を作成してまとめることで読み込むファイルを一つに絞り、ネームスペースも統一することができます。

mixinや変数、関数をimportファイルにまとめる

「foundation」フォルダを変更していきます。
_import.scssに変数を定義しているSassファイルを@forwardでまとめて、_import.scssのみを読み込むように簡略化します。まとめておく事で、後にfoundationにファイルを増やしても、それぞれのSassファイルに追記する必要はなく、_import.scssに記述を増やすだけで良い点がメリットです。

@forward "color";
@forward "mixin";
@forward "reset";
@forward "variables";

@forwardでまとめたことにより、それぞれのファイルは_import.scssを@useで読み込むだけで、foundationのグローバル設定を利用することができるようになります。

@useと@forwardの使い分けについて

なぜ_import.scssでは@useを使ってファイルをまとめないかというと、@useは直下のファイルの変数しか利用できないという特徴があるからです。複数のファイルをまたがってしまう場合、下層のファイルまでは読み込めないのです。そこで、複数のファイルにまたがって整理することができる@forwardを利用します。

○ _import.scssは_color.scssの変数を利用できる

× _header.scssは_color.scssの変数を利用できない

○_header.scssが_color.scssの変数を利用できるようになる

@forwardと@useを使ってSCSSを記述する

@useと@forwardの基本的な記述方法は理解できたかと思います。
では、よくあるサイト構成をもとに、実践的に記述してみましょう。ポイントは下記の通りです。

では、さっそく確認していきます。

フォルダー構成を確認

サイトを構築する上での基本的なファイルを用意しました。

よくあるファイル構成ですね。では、@forwardでグローバル設定をまとめましょう。

mixinや変数、関数をimportファイルにまとめる

「foundation」のフォルダを変更していきます。前述した@forwardの使い方と同様です。

@forward "color";
@forward "mixin";
@forward "reset";
@forward "variables";

こちらは先ほども記載した通りですね。下記は、例として_mixins.scssにはレスポンシブのメディアクエリ設定を、_color.scssは色を定義した変数を記述しました。

$breakpoints: (
  "sm": "screen and (max-width: 450px)",
  "md": "screen and (max-width: 768px)",
  "lg": "screen and (max-width: 960px)",
  "xl": "screen and (max-width: 1140px)",
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

$cYellow: #e8d12f;
$cBlue: #2e6c9e;
$cGreen: #8ab350;

@useを使ってグローバル設定を読み込む

では、この_import.scssをほかのSassファイルで読み込みましょう。
「layout」の_header.scssを参考にします。

_header.scssの一番上の行に「@use “../foundation/import”;」 と記載し、変数の前に「import.」を記述します。

@use "../foundation/import";

header {
  width: 100%;
  height: 50px;
  background-color: import.$cBlue;
  @include import.mq(md) {
    background-color: import.$cYellow;
  }
}

_import.scssを読み込んで、それぞれのSassファイルでも変数を利用してコードを記述することができるようになりました。ネームスペースも統一されたことで、より記述が簡易的になりました。

style.scssにまとめる

これまでは、各Sassファイルでグローバル設定を利用するための設定です。
では、パーツごとに分断化しているファイルをstyle.scssにまとめましょう。

// base
@use "scss/base/reset";
・
・

// component
@use "scss/component/btn";
・
・

// layout
@use "scss/layout/header";
・
・

// pages
@use "scss/pages/home";
・
・

style.scssは、作成したSassファイルを@useで読み込みます。パスが合っていれば基本的に問題ないと思います。
各ファイルを読み込むだけなので、変数は記述する必要がありません。

もしも何らかの理由でstyle.scssでグローバル設定を利用したい場合は、_import.scssを各Sassファイルと同様に@useで読み込みます。

style.scssをコンパイルしてCSSファイルにする

あとはコードエディターのプラグイン等を利用してコンパイルしましょう。style.scssが上手くコンパイルできていれば、変数やmixin設定が有効なCSSファイルとして変換されています。

ちなみに、VSコードの「Live Sass Compiler」は@useに対応していない為コンパイルできません。「DartJS Sass Compiler and Sass Watcher」などの対応プラグインを導入してください。

header {
  width: 100%;
  height: 50px;
  background-color: #2e6c9e;
}
@media screen and (max-width: 768px) {
  header {
    background-color: #e8d12f;
  }
}

・
・
・

便宜上、_header.scssの中身だけ表記しておりますが、他にも読み込んでいるファイルがあればCSSファイルに反映されます。無事、記述したSassファイルがCSSファイルとなりましたので、こちらをindex.htmlで読み込めばいいだけですね。

まとめ

@importに代わり@useと@forwardを利用した記述方法をご紹介しました。改めて、記述のポイントです。

複数のファイルをまたいで利用したい場合は@forwardを、直接的に利用する場合はこれまで通りの@importに代わり@useに書き換えるイメージです。その際はネームスペースの追記をお忘れなく。