Existe alguma maneira de usar @if em um Theme Component usando uma variável?

[merefield (Robert)]

Estou tentando usar uma configuração de tema booleana para determinar se posso usar um estilo específico:

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

e em outro lugar no arquivo incluído:

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

mas isso não parece funcionar…

o estilo é aplicado independentemente de a variável ser verdadeira ou falsa.

[david (David Taylor)]

Variáveis CSS em tempo de execução como --my-variable não podem ser consumidas em instruções @if do SASS/SCSS em tempo de compilação.

Portanto, acho que você teria que lidar com isso inteiramente em tempo de compilação, mantendo apenas as variáveis SCSS. Algo como:

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

[merefield (Robert)]

Obrigado David, tentei todos os tipos de combinações como essa, não sei por que não pensei nessa, valeu!