¿Hay alguna manera de usar @if en un Theme Component usando una variable?

Estoy intentando usar una configuración de tema booleana para determinar si puedo usar un estilo específico:

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

y en otro lugar del archivo incluido:

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

pero esto no parece funcionar…

el estilo se aplica independientemente de si la variable es verdadera o falsa.

3 Me gusta

Las variables CSS en tiempo de ejecución como --my-variable no se pueden consumir en las declaraciones @if de SASS/SCSS en tiempo de compilación.

Por lo tanto, creo que tendrías que manejar esto completamente en tiempo de compilación, limitándote solo a las variables de SCSS. Algo como:

@if $my_boolean_setting_in_theme == "true" {
  ...
}
5 Me gusta

Gracias David, probé todo tipo de combinaciones como esa, no sé por qué no se me ocurrió esa, ¡saludos!

3 Me gusta

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