SASS y custom properties

Ejemplos de uso de las custom properties (o tambien conocidas como variables css) de css junto con las variables de SASS.

$color-principal: #222;
$color-secundario: #f02;

:root {
  --color-uno: #{$color-principal};
  --color-dos: #{$color-secundario};
}

Para insertar el valor de variable SASS al de una custom property hay que usar la expresión #{$nombre-de-variable}.

Al hacer esa interpolación se eliminan las comillas de las cadenas, por lo que si tenemos una variable con algún valor entre comillas (como puede ser en una font-family…) tendríamos que usar la función meta.inspect() de sass:

@use "sass:meta";

$fuente-principal: Arial, "Segoe UI", Roboto;

:root {
  --fuente-principal: #{meta.inspect($fuente-principal)};
}