SASS: declarar variables en :root

Si has tenido problemas al declarar variables SASS/SCSS dentro de la pseudo-clase :root de CSS, es posible que no las estés declarando correctamente en sass.

Para usar variables SASS dentro de tu variables CSS y que se compilen correctamente debes insertar el nombre de la variable SASS/SCSS entre #{$tu_variable_scss}.

Un ejemplo:

$color-negro: #000;

:root {
  // MAL
  --color-principal: $color-negro;

  // BIEN
  --color-pricipal: #{$color-negro};
}

Y código sass anterior compilaría este css:

:root {
  --color-principal: $color-negro;
  --color-pricipal: #000;
}