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?.