SCSSのcolorプロパティの変数に関する頭痛の種

開発
1

コードに詳しい方、このコードは settings.yaml の内容に関わらず常にエラーを発生させるように見えるのはなぜでしょうか？

.d-header {
    background: rgba($header_color, $transparency);
}

しかし、こちらのエラーは発生しません。

.d-header {
    background: rgba(darkslategrey, 0.5);
}

コードを $header_color を rgb(47, 79, 79) 形式で使用するように切り替えても、常に $color 要素に関連するエラーが発生します。 :thinking:

「いいね！」 2
2

これは私には機能しますか？

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
「いいね！」 1
3

しかし、設定ファイル settings.yml に変数をこのように記述すると、動作しません。 $color 変数を使用していないにもかかわらず、「$color は色ではありません」というエラーが発生します。そのため、私が理解していない補間（interpolation）に関連している可能性があります。

header_color:
  type: string
  default: ""
  description:
    en: "..."

transparency:
  type: string
  default: ""
  description:
    en: "..."

私の考えでは、これは CSS のコンパイル方法に関する問題のようです。変数は CSS の実行時に宣言すると機能しますが、個別の settings.yml ファイルから動的に設定すると機能しません。:thinking:

これも機能しません。

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
「いいね！」 1
4

こんにちは、リリー！

私も少し前に同じ問題に遭遇しました。:smile:

簡単な答え：テーマとCSS変数は文字列と見なされ、color、background、borderなどの属性で使用できますが、SCSSのカラー関数では使用できません。

この問題はDiscourseとは関係ありません。

これを回避するための複雑すぎる方法がありますが、試していません。Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

「いいね！」 4
5

こんにちは、リリーさん :wave:

設定で機能するように、これらから変数を作成する必要があります。 :slightly_smiling_face:

簡単な例を次に示します。

「いいね！」 5
6

素晴らしい、ありがとうございます @Don :slight_smile:

「いいね！」 3
7

「無理だよ」って言ったのは初めてじゃないし、君は「できるよ」って言うんだ、ドン :smile:

おそらく最後でもないだろうね :see_no_evil:

「いいね！」 8
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.