SASS(SCSS)のmixinにて構文警告が出てしまう

Question

お世話になります。

Scssのmixinを使いメディアクエリを書こうとしたところ、下記の+に赤い下波線が表示されてしまいます。

@mixin media($min) {
	@media screen and (min-width: $min + px) {
		@content;
	}
}

VSCのコンソールには

) expected scss(css-rparentexpected)

と表示されます。

コンパイル自体は問題なくできているようですが、以前はこういった表示もありませんでした。
SCSSのバージョンによるものなのでしょうか。
調べたところ「Dart Sass 1.33.0以降は徐算で/を使うのは非推奨」という記事しか見当たらず、上記とはまた違うとも思いましたが…
何か解決策がありましたらご教授いただけると幸いです。

以上、よろしくお願いいたします。

Answer 1

私も同じエラーが出て調べました。
もう解決されていたら聞き流してください💦

結果として、インターポレーションを使えばエラー検出されずにコンパイルにも問題は出ませんでした。
書き方は以下です。

@mixin media($min) {
	@media screen and (min-width: #{$min}px) {
		@content;
	}
}

$minの部分に#{}をつけて、+を削除してます。

変数に入った値はプロパティの値にしか使用できないのですが、#{}（インターポレーション）を使えばセレクタやプロパティ名にも使えるようになります。
一度ためしてみてください。

Comments

[cryson]

こちらの方法で無事解決いたしました。
ありがとうございます。