0

Estoy trabajando con sass y Bulma.css, entonces en mi hoja customizada _custom.scss se encuentra las siguientes variables($):

  //sass variables
  $color-1: #12D3CF;
  $color-2: #1F2937;
  $color-title-true: #1F2937;
  $color-title-false: #e5e7eb;
  $color-text-true: #6b7280;
  $color-text-false: #d1d5db;
  $color-border-light: #E5E7EB;

En mi hoja style.scss(mi hoja principal):

@use "custom" as *;
:root {
--color-primary: $color-1;
--color-second: $color-2;
--color-title-true: $color-title-true;
--color-title-false: $color-title-false;
--color-text-true: $color-text-true;
--color-text-false: $color-text-false;
--color-border-light: $color-border-light;
}
.button:active{
  border-color: $color-1;
}

Y cuando compilo a css, hoja style.css salen las siguientes variables:

:root {
--color-primary: $color-1;
--color-second: $color-2;
--color-title-true: $color-title-true;
--color-title-false: $color-title-false;
--color-text-true: $color-text-true;
--color-text-false: $color-text-false;
--color-border-light: $color-border-light;
}
.button:active{
  border-color: #12D3CF;
}

Como pueden notar solo dentro de :root las variables no son reconocidas.

¿Tiene alguna explicación de por que no son reconocidas en :root?.

2 respuestas 2

0

Para utilizar tus variables SASS en el :root del CSS debes declarar la variable usando Interpolation, de esta forma: #{$variable}.

Tu código quedaría de la siguiente manera:

//sass variables
$color-1: #12D3CF;
$color-2: #1F2937;
$color-title-true: #1F2937;
$color-title-false: #e5e7eb;
$color-text-true: #6b7280;
$color-text-false: #d1d5db;
$color-border-light: #E5E7EB;

:root {
--color-primary: #{$color-1};
--color-second: #{$color-2};
--color-title-true: #{$color-title-true};
--color-title-false: #{$color-title-false};
--color-text-true: #{$color-text-true};
--color-text-false: #{$color-text-false};
--color-border-light: #{$color-border-light};
}

.button:active{
  border-color: $color-1;
}

Aquí tienes un ejemplo reproducible

0

no conozco Bulma pero te fijate si te funciona de esta manera:

:root {
--color-primary: variables.$color-1;
--color-second: variables.$color-2;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.