変数を使い、Theme Componentで@ifを使用する方法はありますか？

開発
1

テーマのブール値設定を使用して、特定のスタイルセットを使用できるかどうかを判断しようとしています。

@if var(--my-variable) {
   .my-selector {
      display: block;
  }
}

および、インクルードされたファイル内の別の場所：

:root {
  --my-variable: #{$my_boolean_setting_in_theme};
}

しかし、これは機能しないようです。

変数が true か false かに関係なく、スタイルが適用されます。

2

実行時CSS変数（例：--my-variable）は、SASS/SCSSのビルド時@ifステートメントで消費することはできません。

そのため、すべてビルド時に処理し、SCSS変数のみを使用する必要があると思います。たとえば次のようになります。

@if $my_boolean_setting_in_theme == "true" {
  ...
}
3

デイビッド、ありがとう。そのようなあらゆる組み合わせを試しましたが、なぜそれに気づかなかったのか分かりません。乾杯！