VSCodeのコンパイルエラー：pxをremに自動変換できない

Question

実現したいこと

• VSCodeのエラーの解決法がわかりません。

前提

scssでpxをremに自動変換する式を今まで問題なく使えていましたが、
突然VSCodeに変換できていないと思われるエラーが出ました。
過去に作った問題のなかったscssファイルを再保存してみても同じエラーが出ます。

webスクール終了後まもない初心者で、聞ける人がいなくて困っています。
アドバイスいただけたら助かります。

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

Compilation Error
Error: 2 arguments required, but only 1 was passed.
╷
56 │ padding: 0 rem(184) 0 rem(183);
│ ^^^^^^^^
╵

※上の波線の位置はこの欄ではズレて表示されていますが、実際にはrem(184) の下にあります。

該当のソースコード

@charset "UTF-8";
/* 文字コードの指定 */

/* ページ全体のスタイル
------------------------------------------ */
/* pxをremに自動変換 PC用 */
@function rem($px) {
  @return calc($px / 16) * 1rem;
}

/* pxをvwに自動変換 SP用 */
@function vw($px) {
  @return calc($px * 100vw / 375); // 例: カンプ幅 375pxの場合 100vw/375
}

/* コンテナ */
.container {
  padding: 0 vw(27) 0 vw(29);

  @media (min-width: 768px) {
    padding: 0 rem(184) 0 rem(183);
  }
}

試したこと

⚫︎.containerの「@media (min-width: 768px) 〜」の部分を消すとエラーは出ない
⚫︎コピペではなく、打ち直してもエラーが出る
⚫︎過去作ったエラーのないscssファイルからコピペした新規ファイル（フォルダ）でもエラーが出る
⚫︎過去作ったエラーのないscssファイルを再保存してもエラーが出る
⚫︎VSCodeの再インストール。拡張機能Live Sass Compilerをアンインストール後、再インストール
⚫︎Macの再起動
⚫︎ネットでエラー内容を検索（見つけられません...）

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

macOS Ventura 13.4.1
Visual Studio Code 1.81.1 (Universal)

Answer 1

私も同じく使えなくなってしまいました。
同じ原因かもしれないと思ったので、候補として回答いたします。

英語が苦手なのできちんとした翻訳はできていないですが、rem() はカスタム関数ではなくなってしまった、と書いてありました。
rem() ではなく、別のカスタム関数（例えば、abc() など）に置き換えると、エラーがでずにコンパイルできるようになりました。

少し自分の環境と異なる部分もあるので、違うかもしれませんがお試しください。

/* pxをremに自動変換 PC用 */
@function abc($px) {
  @return calc($px / 16) * 1rem;
}
/* コンテナ */
.container {
  @media (min-width: 768px) {
    padding: 0 abc(184) 0 abc(183);
  }
}

Comments

[m.o]

ありがとうございます！！
remと書いてた部分をabcにしたらエラーがなくコンパイルされました！
rem()が使えなくなってたんですね。。わかりやすくて良かったんですが。

もうscssはやめてcssで練習していたところです。本当に助かりました、ありがとうございます！！

[pepeke]

解決してよかったです。
本日、別件でrem()のまま試したところ、私の環境でエラーにならずにコンパイルできるように戻っていました、、
そちらではどうでしょうか？
あまり不確かなことは書けないですが、Sassのバージョンの影響かもしれません、、

[m.o]

pepeke様
返信に気づかず何ヶ月も放置してしまって本当にすみません！！
今偶然このサイトを見ていて初めて気づきました（汗）
親切にお答えいただいたのに申し訳ないです、本当にごめんなさい。

今さらなんですが、pepeke様の言ってたrem()を今、私も試してみたら
普通にコンパイルされました...！
一時的なことだったのでしょうか。。
私みたいな初心者にはよくわかりませんが、今後はrem()に戻してやってみます。

ご返信ありがとうございました。

Answer 2

.container〜部分のコピペをやってるうちに、「 } 」がないというエラーに変わりました。
px変換は関係なく、自動インデントが効かなくなったことが原因かもしれません。
VS Codeの環境設定ファイルに原因がありそうなので、もう少し自分で調べてみます。

↑「 } 」がないエラーはただのコピペミスでした。

ターミナルアプリに下記を記入、エンターキー押してVSCodeをアンインストール後、再インストール。

rm -rf /Applications/Visual\ Studio\ Code.app/
rm -rf ~/Library/Application\ Support/Code
rm -rf ~/.vscode/

質問のエラーは変わらず出ます。解決策をアドバイス頂けないでしょうか、よろしくお願いします。