こんにちは！たくお（@TB_IQ）です。
今日はちょっくらWEB制作の話で、Sass（SCSS）の@importを@use に書き換える話をします。
スポンサーリンク
コンテンツ
2025年6月現在、VSCodeプラグインLiveSassCompilerだと@importはまだ使える
そうなんです。VSCodeのプラグインLive Sass Compilerなら2025年6月現在でも@import が使えてしまうんです。
それを良いことにずっと@import を使っていましたが、さすがに時代錯誤だろうということで、@use に書き換えていこうと思います。
FLOCSSを採用している場合の@import→@useの書き換え
特段、変数やmixinを使っていないのであれば@importをそのまま@useに置き換えるだけで良いのかもしません。
私は普段FLOCSSを採用しています。そのため、ディレクトリ・ファイル構造はいかのような感じ。
.
├── style.scss
├── component
│ ├── _arrow.scss
│ ├── _pager.scss
│ ├── _searchform.scss
│ ├── _share-buttons.scss
│ └── _widget.scss
├── foundation
│ ├── _base.scss
│ ├── _reset.scss
│ └── _variable.scss
├── layout
│ ├── _container.scss
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
├── project
│ ├── _comments.scss
│ ├── _heading.scss
│ ├── _loop-grid.scss
│ ├── _main-visual.scss
│ ├── _post-content.scss
│ ├── _single.scss
│ └── _sp-menu.scss
└── utility
└── _utility.scss
style.scssでは以下のように@importしていました。
@charset "UTF-8";
// ==========================================================================
// Foundation
// ==========================================================================
@import "foundation/reset";
@import "foundation/base";
@import "foundation/variable";
// ==========================================================================
// Layout
// ==========================================================================
@import "layout/header";
@import "layout/container";
@import "layout/main";
@import "layout/sidebar";
@import "layout/footer";
// ==========================================================================
// Component
// ==========================================================================
@import "component/arrow";
@import "component/pager";
@import "component/searchform";
@import "component/share-buttons";
@import "component/widget";
// ==========================================================================
// Project
// ==========================================================================
@import "project/comments";
@import "project/heading";
@import "project/loop-grid";
@import "project/main-visual";
@import "project/post-content";
@import "project/single";
@import "project/sp-menu";
// ==========================================================================
// Utility
// ==========================================================================
@import "utility/utility";
私の環境で変数・mixin・関数が少ないのでfoundation/_base.scssにまとめています。ファイルとしてfoundation/_variable.scssは用意していますが、実は中身は空っぽです。
まず、style.css の@importを@useに書き換えます。
@charset "UTF-8";
// ==========================================================================
// Foundation
// ==========================================================================
@use "foundation/reset";
@use "foundation/base";
@use "foundation/variable";
// ==========================================================================
// Layout
// ==========================================================================
@use "layout/header";
@use "layout/container";
@use "layout/main";
@use "layout/sidebar";
@use "layout/footer";
// ==========================================================================
// Component
// ==========================================================================
@use "component/arrow";
@use "component/pager";
@use "component/searchform";
@use "component/share-buttons";
@use "component/widget";
// ==========================================================================
// Project
// ==========================================================================
@use "project/comments";
@use "project/heading";
@use "project/loop-grid";
@use "project/main-visual";
@use "project/post-content";
@use "project/single";
@use "project/sp-menu";
// ==========================================================================
// Utility
// ==========================================================================
@use "utility/utility";
そして、変数・ミックスイン・関数を使用しているファイルの冒頭で以下のようにfoundation/_base.scss を@use で読み込みます。
@use "../foundation/base" as *;
これで完了です。
スポンサーリンク
おわりに
今日はSassの@import を@use に書き換える方法についてお話しました。
もともとCSSは上から順番に読み込まれていくもの。Sassの@import についても同様の認識で読み込み順番を考えながら書いていました。
今回使用しませんでしたが、@use の他に@forward もあります。
これを機にSCSSの設計について抜本的に変えていったほうが良いのかもしれませんね。
皆さんはどのように設計されているのでしょう、気になる所です。
というわけで次回もよしなに！