Dart Sassへの移行ガイド：@useと@forward、ビルトインモジュールの書き方

Sassの新機能は、公式が推奨するDart Sassにだけ実装されます。また、今までの記述方法の中には、非推奨となり、今後廃止されるものもあります。

以前から有名なVisual Studio Code（以下「VS Code」といいます）の拡張機能ではDart Sassが使われていないので、Dart Sassに対応した拡張機能を使う必要があります。

※Gulpやnpm-scriptsなどで実行している場合も、Dart Sassに対応したパッケージ（sass）に変更する必要があります。

次の拡張機能は、いずれも2020年までに更新が止まっています。

• Live Sass Compiler⁠（新しいタブで開く）
• Easy Sass⁠（新しいタブで開く）
• Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro⁠（新しいタブで開く）

VS CodeでDart Sassが使える拡張機能はLive Sass Compiler⁠（新しいタブで開く）がいいと思います。

以前の拡張機能とは異なり、作者が「Glenn Marks」となっているものをインストールしてください。

画面右下のWatch Sassをクリックすれば対象ファイルの監視が始まり、ファイルを保存するとコンパイルされます。

対応ブラウザを指定して、コンパイル時に付与するベンダープレフィックスを制限しましょう。

Live Sass Compile › Settings: Autoprefixの「settings.json で編集」をクリックするとファイルが開くので、下記の例を参考に追記してください。

1{2  "liveSassCompile.settings.autoprefix": [3    "last 2 major versions",4    "> 0.5%",5    "not opera > 0",6    "not op_mini all",7    "not dead"8  ],9  "liveSassCompile.settings.formats": [10    {11      "format": "expanded",12      "extensionName": ".css",13      "savePath": "/css",14      "savePathReplacementPairs": null15    }16  ]17}

私は上記の設定にしていますが、対応ブラウザの書き方はBrowserslist⁠（新しいタブで開く）のサイトで確認できます。

パーシャルファイルを読み込むときに使っていた@importは非推奨になり、代わりに@useを使うことになります。しかしこれが少し厄介で、@importとは書き方が変わります。

@importは、2024年10月リリースのDart Sass 1.80.0で非推奨になり、コンパイル時に警告が出るようになりました。Dart Sass 3.0.0で廃止される予定で、3.0.0のリリースは早くても1.80.0の2年後（2026年10月）以降とされています。

例えば、「parts」フォルダにある「_variables.scss」を読み込みたいとき、@use "parts/variables";と指定します。読み込んだ_variables.scssの中にある変数を、読み込み先のstyle.scssで使用するには以下のように記述します。

ファイル名が名前空間（namespace）になるので、使う場所で「名前空間.変数名」と指定します。

1$color-red: #f00;

1@use "parts/variables";23p {4  color: variables.$color-red;5}

ここからがさらにややこしいのですが、「パーツ系のパーシャル（parts/_mixin.scssやparts/_function.scssなど） → パーシャルを1つにまとめたパーシャル（parts/_index.scss） → コンパイル対象のstyle.scss」のように中間に何かファイルを挟む場合は、中間のファイルでの読み込みに@forwardを使用します。そして、_index.scssの場合は、読み込むときにディレクトリの指定まででOKです。

1$color-red: #f00;

1@mixin fontset {2  font-size: 16px;3  font-weight: normal;4  font-style: normal;5}

1@forward "variables";2@forward "mixin";

1@use "parts";23p {4  @include parts.fontset;5  color: parts.$color-red;6}

そして、@forwardを使っているファイル内で変数などを呼び出したいときは、@forwardと@useを併用する必要があります。

1@forward "variables";2@forward "mixin";34@use "variables";56a {7  color: variables.$color-red;8}

毎回呼び出し時に名前空間を指定するのは面倒ですよね。公式の意向としては、これを付けることでどのファイルから呼び出しているかを明確にして、メンテナンスしやすいようにすることが目的のようです。だから@importより扱いが細かくなっているんですね。

ただ、名前空間の指定は、記述を少し追加すれば楽にすることができます。

@use "variables" as varのように、asの後に任意の名前を指定すると、それを名前空間として使用できます。

そして、@use "variables" as *のように*（アスタリスク）を付けると、@importのときと同様に、名前空間の指定なしで使うことができます。

1@use "parts/variables" as *;2@use "parts/mixin" as mix;34p {5  @include mix.fontset;6  color: $color-red;7}

なお、公式の移行ツール（Sass Migrator⁠（新しいタブで開く））を使うと、@importから@use・@forwardへの書き換えを自動で行えます。

Sassにはlightenやdarkenなどの組み込み関数が用意されています。しかし、Dart Sassではこれに代わってビルトインモジュールを使用することになります。グローバルな組み込み関数も、@importと同じくDart Sass 1.80.0で非推奨になり、3.0.0で廃止される予定です。

実は、除算の/も非推奨になっています（Dart Sass 1.33.0以降。2.0.0で廃止予定）。こちらをご覧ください。これはLibSassで私が使用していた関数です。htmlのfont-sizeを62.5%（1rem = 10px）にしていたので、指定した値を10で割る関数を使っていました。例えば20pxを指定したい場合、計算結果が2remと出せればよいのです。

1@function rem($pixels) {2  @return ($pixels / 10) * 1rem;3}

今まではこの表記でよかったのですが、Dart Sassからは下記の記述をする必要があります。

1@use "sass:math";23@function rem($pixels) {4  @return math.div($pixels, 10) * 1rem;5}

Sassで用意されているmathモジュールを@useで読み込むことで使えるということです。他にも様々なビルトインモジュールが用意されています。

• sass:color
• sass:list
• sass:map
• sass:math
• sass:meta
• sass:selector
• sass:string

下記のようにメディアクエリを呼び出すmixinを使っている方は、map-getを、sass:mapを使ったmap.getという形に書き換える必要があります。

1@mixin mq($breakpoint: md) {2  @media only #{map-get($breakpoints-up, $breakpoint)} {3    @content;4  }5}

1@use "sass:map";23@mixin mq($breakpoint: md) {4  @media only #{map.get($breakpoints-up, $breakpoint)} {5    @content;6  }7}

なお、Sassではrgba()に16進数のカラーコードを直接指定できますが、この書き方はDart Sassでもそのまま使えます。sass:colorモジュールのcolor.change()でも同じ結果になります。

1@use "sass:color";23// どちらも rgba(0, 0, 0, 0.6) になる4.overlay-a {5  background-color: rgba(#000, .6);6}78.overlay-b {9  background-color: color.change(#000, $alpha: .6);10}

かなり長くなってしまいましたが、Dart Sassへの移行時は、こまめにコンパイルして、エラーが出ないように少しずつ進めていくと良いと思います。公式の推奨に合わせて、少し苦労してでもDart Sassに移行すべきだと思います。

• Sass: Syntactically Awesome Style Sheets⁠（新しいタブで開く）
• Sass: LibSass is Deprecated⁠（新しいタブで開く）
• Sass: Breaking Change: @import and global built-in functions⁠（新しいタブで開く）
• Sass: Breaking Change: Slash as Division⁠（新しいタブで開く）
• GitHub - browserslist/browserslist⁠（新しいタブで開く）
• Browserslist⁠（新しいタブで開く）