nnnoot
@nnnoot

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

vs codeの「Live Sass Compiler」におけるscssのコンパイルエラーを解消したい。

解決したいこと

vs codeの「Live Sass Compiler」におけるscssのコンパイルエラーを解消したい。

発生している問題・エラー

Compilation Error
Error: (white: #fff, black: #000, text: #333333, grey: #221717, lightgrey: #f2f2f2, red: #ff0000, primary: #4d0000, gold: #b8860bea, baige: #ffffdd) isn't a valid CSS value.
        on line 5 of Users/##/Desktop/##/scss/foundation/_base.scss
>> $colors: (

   ---------^

該当するソースコード


$colors: (
  white: #fff,
  black: #000,
  text: #333333,
  grey: #221717,
  lightgrey: #f2f2f2,
  red: #ff0000,
  primary: #4d0000,
  gold: #b8860bea,
  baige: #ffffdd,
);

自分で試したこと

反映されていないという意味は分かりましたが原因が掴めずにいます。
on line 5が$colorsに該当しますがどこにエラーが発生しているのか分かりませんでした。

0

2Answer

「sass "isn't a valid CSS value"」でWeb検索した結果見つかったページ

内容は、定義した値を使用しているところに構文エラーがある場合に、その定義自体を悪者として判断する模様。

colorsの使用箇所を洗い出してみると良いかもしれません。

1Like

Comments

  1. @nnnoot

    Questioner

    ご回答ありがとうございます。
    colorsの使用箇所にエラーが出ている可能性があるとのことですね。
    確認してみます。

Visual Studio Code 1.57.1、 Live Sass Compiler 3.0.0 でそのコードをコンパイルしましたがエラーは出ませんでした。それより前のコードの構文エラーが影響しているような気がします。1〜4行目はどうなっていますか?

0Like

Comments

  1. @nnnoot

    Questioner

    uasi様
    再度ご回答ありがとうございます。

    scss1〜4行目ですが

    // COLORS
    // @inlcude cl(black);
    //--------------------------------------------------

    上記コードとなっております。

    追記
    コメント部分でしたので削除してみましたが

    Compilation Error
    Error: (white: #fff, black: #000, text: #333333, grey: #221717, lightgrey: #f2f2f2, red: #ff0000, primary: #4d0000, gold: #b8860bea, baige: #ffffdd) isn't a valid CSS value.
    on line 1 of Users/##/Desktop/##/scss/foundation/_base.scss
    >> $colors: (

    ---------^

    やはり$colors 部分にエラーが出ていると考えます。
  2. ありがとうございます。だとすると @ktz_alias さんの指摘の通り変数を使用する側に問題がありそうですね。
  3. @nnnoot

    Questioner

    お二方ありがとうございます。
    変数使用箇所を変更すると解決に至りました。
    エラー前後を注視していきます。

Your answer might help someone💌