Increased compatibility with CSS custom properties

[calebdwilliams]

First off, I love SASS/SCSS and have been using it for years; however, as browsers have continued to evolve some of the core features of SASS have made their way into vanilla CSS. I'd love to see a new variable type in SASS (maybe with a different sigil prefix than $ that would be automatically output as a CSS variable with a fallback value. For example:

#primaryColor: tomato;

.selector {
  background: #primaryColor;
}

could be output as

.selector {
  background: tomato;
  background: var(--primaryColor, tomato);
}

This is matching some of the behavior in PostCSS and would make the transition to using CSS custom properties much easier for a large portion of SCSS users.

The question I still have is how to declare the variable scope (do we write the value to :root or :host, etc.).

[Awjin]

This behavior really makes sense as a post-css transform, but less as built-in Sass syntax, for a couple reasons:

1. Sass is quite conservative with its polyfilling, partly because CSS compatibility is always changing. Designing, implementing, maintaining, and then (potentially) migrating away from a feature is a lot of work. In this case, I'd be wary of investing resources into brand new syntax (#) that mostly replicates what CSS already does with its custom property syntax that has been supported for years now.

2. This transformation creates a dependency on a variable (--primaryColor) that is not explicitly defined, which could cause unexpected and hard to debug behavior in the outputted style.

If you are interested in DRYing up code to avoid manually setting fallbacks on each invocation of a CSS custom property, a possible solution is a mixin that programmatically creates the fallback.