Live SASS Compilerがアップデートしたので、Dart Sass 3.0.0のやりかたに変えましたよ
2025.12.20
CSSのプリプロセッサを使ってみなさんコーディングをしていると思います。
VS codeでLive sass compilerを使っているのですが、最近のアップデートでwarningが出るようになりました。
要するに@importなどはDart Sass 3.0では非推奨になるとのこと。
こんな感じでエラーが見にくくなってしまったので、推奨の通りに変更しました。
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
5 |@import "base/mixin", "base/reset", "base/general";
| ^............^
╵mixinで変数を使いたいので、少し面倒ですが、各ファイルへmixinを読み込む記述をいれました。
名前空間が必要になりますが、今までと極力書き方を変えないで済むように、ワイルドカードを使用。
@use "base/mixin" as *;パスはそのファイルからの相対にしています。
さらにmixinのなかでmapも使っているので、そこも変更する。
@use "sass:map";sass:mapを使うよ宣言を先にいれて、ブレークポイントに使っていたところを変更しました。
コメントのところが以前の書き方。
// ブレークポイント処理
// @mixin mq($breakpoint: sp) {
// @media #{map-get($breakpoints, $breakpoint)} {
// @content;
// }
// }
@mixin mq($size) {
@media #{map.get($breakpoints, $size)} {
@content;
}
}最後に集約しているインポートのところも変更しました。
// @import "base/mixin", "base/reset", "base/general";
@forward "base/mixin";
@use "base/reset";
@use "base/general";
// @import "layouts/header";
// @import "layouts/footer";
// @import "layouts/sidebar";
// @import "layouts/layout";
@use "layouts/header";
@use "layouts/footer";
@use "layouts/sidebar";
@use "layouts/layout";ここでいったんコンパイルしてみたところ、darken()が非推奨だよと言われました。
ご丁寧にサジェストもしてくれていますね。
Warning:
darken() is deprecated. Suggestions:
color.scale($color, $lightness: -25%)
color.adjust($color, $lightness: -20%)
More info: https://sass-lang.com/d/color-functions
╷
111 | box-shadow: 0 3px 0 darken($gry, 20);
| ^................^ということで、color関数を使ってみました。
最初にsass:colorの宣言をいれて、コメントが前の書き方、下がcolor関数の書き方です。
lighten()の場合は負のパーセントではなく、正のパーセントにすればヨシ。
@use 'sass:color' ;
//box-shadow: 0 3px 0 darken($main, 20);
box-shadow: 0 3px 0 color.adjust($main, $lightness: -20%);
//background-color: darken($main, 10);
background-color: color.adjust($main, $lightness: -10%); 無事にコンパイルが通りました。
オススメ記事
新着記事
カテゴリ一覧
- DX（1）
- WordPress テーマ（1）
- フォント（1）
- 映画のデザイン（1）