Live sass compilerを用いてコードを書いているが、メディアクエリのみ反映されない

前提・実現したいこと

Live sass compilerを用いてコードを書いていますが、レスポンシブ表示（メディアクエリ）のみ反映されません。
ほかのネスト（入れ子）などは反映されており、watching…とも出ています。
$breakpointsなどの定義の仕方が間違っているのでしょうか？

発生している問題・エラーメッセージ

Compilation Error
Internal Error: Incompatible units: '%' and 'px'.
--------------------
Watching...
--------------------



```ここに言語名を入力

//マップ型変数breakpointsを定義
$breakpoints: (
//キー　　値
'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;

//メディアクエリ用のmixinを定義。デフォ値はmd
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
@media #{map-get($breakpoints, $breakpoint)} {
//この中をカスタムできる
@content;
}
}


### 試したこと
エラーメッセージ「Internal Error: Incompatible units: '%' and 'px'.」でgoogle検索しましたが、sassとcssで単位が異なりけんかしているとのこと。。の様ですが、自身では解決方法がわかりませんでした。
参考サイト：https://doudemo.info/plane-css-min_and_sass-min-functions_are_different/

sass自体は「watching…」と表示されているので、機能はしていると思います。
メディアクエリのみなかなか効かず、レスポンシブの設定ができません。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/03/07 09:07

エラーで調べて出てきた記事URL、試したことを記載してください。でないと既に参照した記事が出る可能性は高く（大体トップから５番目までを参照するから）そうなると二度手間になる可能性もありますし、「解決しそうな記事を参考にしているのか」「その記事の意図することを理解して試してるか」が伝わるかどうかでアドバイスの方向性も変わってきます。

mimimimim

2021/03/08 01:51

ありがとうございます！ Live Sass Compilerでの最新エラーは、画面の下側に表示されるのですね。今回質問した内容のエラー表示はおそらく2日前のもので、解決済みでした。 @include mq(sp) { font-size: 28px; } のように書いても@media screen and (max-width: 767px) などとcss上に変換されなかったのですが、再度試してみると変換されました！！ありがとうございます。