[Feature Request] Flag for the compiler to compile SASS variables into CSS variables

[ncovercash]

Hello,

Admittedly, I am not terribly familiar with SASS, I was wondering if it would be possible to add a flag to the compiler to, instead of substituting variables in, do the following:

$blue: #3bbfce;
$margin: 16px;

.content_navigation {
  color: $blue;
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

to

:root {
  --blue: #3bbfce;
  --margin: 16px;
}

.content_navigation {
  color: var(--blue);
}

.border {
  padding: var(--margin) / 2;
  margin: var(--margin) / 2;
  border-color: var(--blue);
}

Additional details, such as what to do with functions like darken, would need to be worked out, however I think this feature would be highly useful. This is especially important in CDN environments, such as Materialize, where the user must download the source, recompile it themselves, then host it themselves if they want to do something like change a color.

[nex3]

The semantics of Sass variables are very different than those of CSS custom properties. For one thing, Sass variables are interpreted procedurally, so that a change later in the stylesheet won't affect earlier uses of the variable. They also support functions, operations, mixins, and control structures in a way that's impossible to emulate with custom properties. You're better of choosing between the two for use-cases where each one makes sense.