WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

VS CodeでSassエラー？Live SASS Compilerが告げる「Dart Sass 3.0.0」時代の新常識とモダンなSass記法

VS CodeでSassエラー？Live SASS Compilerが告げる「Dart Sass 3.0.0」時代の新常識とモダンなSass記法

投稿者の画像

y.kobayashi

2025.07.29 更新

この記事を共有する

この記事を共有する

Close

もっと知らせる

ウェブデザインの世界は常に進化しており、CSSプリプロセッサのSassも例外ではありません。多くのWebデザイナーが愛用するVS Codeの「Live SASS Compiler」拡張機能が最近アップデートされ、内部で利用されるDart Sassのバージョンが大幅に引き上げられました。

もしあなたがLive SASS Compilerをアップデートした後、「突然コンパイルエラーが出るようになった」「見慣れない警告メッセージが表示される」といった問題に直面しているなら、この記事がまさにあなたのためのものです。

この記事では、Live SASS Compilerの最新アップデートがSassの記述にどのような影響を与えるのか、そしてWebデザイナーとして今すぐ対応すべき非推奨構文とその改善方法について、具体的に解説していきます。

Live SASS Compilerの最新アップデート：何が変わったのか？

2025年7月下旬にリリースされたLive SASS Compilerのバージョン6.1.3および6.1.4のアップデートは、特に以下の点で注目に値します。

  • Dart Sassのバージョンが1.89.2に更新！
    これが最も重要な変更点です。
    Live SASS Compilerが内部で利用するSassコンパイラであるDart Sassが最新のバージョンに更新されました。
    Dart SassはSassの主要な実装であり、そのバージョンは現在、1.x.x系で進んでいます。
    1.89.2というバージョンは、多くのバグ修正、パフォーマンス改善、そして非推奨機能に対する警告の強化が図られています。
    これこそが、あなたのSassファイルでエラーや警告が出始めた主な原因である可能性が高いです。
  • postcssとautoprefixerも最新版に更新
    CSSのポストプロセス（ベンダープレフィックスの自動付与など）を担うこれらのライブラリも更新され、より現代的なCSS環境に対応しています。

このアップデートにより、あなたのSass環境は最新の状態に保たれますが、同時に古いSassの記述方法が厳しくチェックされるようになります。

【重要】Webデザイナーが今すぐ対応すべきSass非推奨構文と改善方法

Dart Sassのバージョンアップに伴い、以前は問題なくコンパイルできていたSassファイルでも、エラーや警告が表示されることがあります。
特に以下の3つの変更点には、今すぐ対応することをおすすめします。

1. @import ルールは非推奨！@use と @forward へ移行せよ

現在のSass環境で最も大きな変更点であり、最優先で対応すべき項目です。
Sassの新しいモジュールシステムとして、@use と @forward が導入されました。
従来の @import は将来的に完全に削除される予定であり、すでに多くの警告が表示されるようになっています。

  • なぜ非推奨に？
    @import は変数のスコープがグローバルになりがちで、名前の衝突（競合）が発生しやすいという問題がありました。
    また、必要なものだけを読み込むという観点でも改善の余地がありました。
  • 出る可能性のあるエラー/警告:
    @import is deprecated (非推奨の警告)
    Undefined mixin / Undefined function (ミックスインや関数が見つからないエラー)
  • 改善方法:
    @use を使用する:
    他のSassファイル（パーシャルファイルなど）の変数、ミックスイン、関数、プレースホルダーセレクタを使用する際に利用します。
    @use を使うと、インポート元に名前空間が作成され、名前の衝突を防ぎつつ必要なものだけを呼び出せます。
    @forward を使用する:
    複数のSassファイルをまとめて、一つのファイルを通じて外部に公開したい場合に利用します。
    主にライブラリを作成する際などに使われます。
  • 移行のヒント:
    大規模なプロジェクトの場合、手動での移行は大変です。
    Sassチームが提供しているsass-migratorのようなツールを利用すると、
    自動で @import を @use へと変換してくれるため、移行作業を大幅に効率化できます。
/* _variables.scss (別ファイル) */
$primary-color: #007bff; 
@mixin flex-center { 
  display: flex; justify-content: center; align-items: center; 
} 
/* style.scss (メインファイル) */
@use 'variables'; 
/* 'variables'という名前空間が作成される */
.button { 
  background-color: variables.$primary-color; 
  /* 名前空間を使って変数にアクセス */
  @include variables.flex-center; 
  /* 名前空間を使ってミックスインを呼び出し */
  padding: 10px 20px; 
}
/* _typography.scss */
@mixin heading-style { /* ... */ } 
/* _buttons.scss */
@mixin button-style { /* ... */ } 
/* _components.scss (外部に公開するファイル) */
@forward 'typography'; 
/* typography.scssのミックスインがcomponents.scssを通じて公開される */
@forward 'buttons'; 
/* buttons.scssのミックスインも同様に公開 
    main.scss */
@use 'components'; 
/* componentsを通じて_typographyと_buttonsのミックスインが使えるようになる */
.title { 
  @include components.heading-style; 
}

2. スラッシュ除算は非推奨！sass:math モジュールを使おう

CSSプロパティ値の一部（例: font: 16px/1.5;）と混同されやすかった /（スラッシュ）演算子による除算が非推奨になりました。
これからは、明示的に除算を行う場合は math.div() 関数を使用することが推奨されます。

  • なぜ非推奨に？
    Sassのコンパイラは、これがCSSの除算なのか、それともCSSプロパティ値の一部なのかを判断するのが困難でした。これにより、予期しない結果やエラーが発生する可能性がありました。
  • 出る可能性のあるエラー/警告:
    ‘/’ is not allowed in unquoted text (スラッシュが許可されない警告)
  • 改善方法:
    @use ‘sass:math’; を宣言し、math.div() 関数を使用します。
/* 古いSass (非推奨) */
$half-width: 100px / 2;  /* => 50px 

/* 新しいSass (推奨) */
@use 'sass:math';  /* mathモジュールを読み込む */
$half-width: math.div(100px, 2);  /* => 50px */

CSSの font プロパティのようにスラッシュを区切り文字として使いたい場合は、
そのまま記述して問題ありません。

3. 色操作関数は非推奨！CSS関数または sass:color モジュールへ

lighten(), darken(), saturate(), desaturate() といったSass独自の便利な色調整関数が非推奨になりました。
これらの関数はCSSの標準には存在しないため、より標準的で保守しやすいCSSの関数 (rgb(), hsl() など) や、新しいSassの sass:color モジュールの利用が推奨されます。

  • なぜ非推奨に？
    Sassの特定の実装に依存せず、より標準的なWeb技術（CSS）との互換性を高めるためです。
    また、color.adjust() や color.scale() の方がより細かな色の調整が可能です。
  • 出る可能性のあるエラー/警告:
    lighten() is deprecated (非推奨の警告)
  • 改善方法:
    CSSのネイティブ関数（rgb(), rgba(), hsl(), hsla()）を使用する。
    @use ‘sass:color’; を宣言し、color.adjust(), color.scale(), color.mix() などの関数を使用する。
/* 古いSass (非推奨) */
$base-color: #336699; 
$light-color: lighten($base-color, 20%); 
$dark-color: darken($base-color, 10%); 
/* 新しいSass (推奨) */
@use 'sass:color'; 
$base-color: #336699; 
/* 明度を20%上げる */
$light-color: color.adjust($base-color, $lightness: 20%); 
/* 明度を10%下げる */
$dark-color: color.adjust($base-color, $lightness: -10%); 
/* 例：2色を混ぜる場合 */
$mixed-color: color.mix(red, blue, 50%); /* 赤と青を50%ずつ混ぜる */

ベンダープレフィックスはAutoprefixerに任せよう！

Sass自体がベンダープレフィックス（-webkit-, -moz-など）を自動で付与する機能は、Dart Sassではサポートが限定的であり、推奨されていません。
これからは、PostCSSとAutoprefixerをビルドプロセスに導入することを強くおすすめします。

  • なぜ推奨されるのか？
    Autoprefixerは、Can I use…のデータに基づいて、必要なベンダープレフィックスを正確かつ自動的に付与してくれます。
    これにより、Sassファイルがよりクリーンになり、メンテナンス性も向上します。
  • 対応方法:
    多くの場合、GulpやWebpackなどのビルドツールと組み合わせて使用します。
    Live SASS Compiler単体ではこの機能は提供されないため、より高度な開発環境を構築する際に検討してください。

まとめ：最新のSass環境でより効率的なWebデザインを

Live SASS Compilerのアップデートは、Sassが常に進化し、より良いCSSを生成するための努力を続けている証拠です。
最初は戸惑うかもしれませんが、これらの新しい構文やベストプラクティスを習得することで、あなたのSassコードはより堅牢に、より保守しやすくなります。

  • @import から @use / @forward への移行を最優先！
  • 除算は math.div() で明確に！
  • 色調整は sass:color モジュールまたはCSSネイティブ関数で！
  • ベンダープレフィックスはAutoprefixerに任せる！

これらの変更に対応することで、あなたはSassの最新機能を最大限に活用し、より効率的でモダンなWebデザインを実現できるようになるでしょう。今すぐあなたのSassファイルを見直し、最新のSass環境に最適化しましょう！

関連リンク

もっと知らせる