[Feat] Support dynamically created CSS variables using SCSS/Sass

[Anoesj]

In many of my projects, I use the following SCSS mixin to define colors:

/// Creates CSS var and some additional CSS vars for the hue, saturation
/// and lightness values of the given color.
/// Inspired by https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
///
/// @param {string} $css-var-name: The name of the CSS var.
/// @param {string} $hex-color-value: The hex color value.
/// @example scss - Usage
///   :root { @include declare-hsl-color(--color-primary, #ff0000); }
@mixin declare-hsl-color($css-var-name, $hex-color-value) {
    #{$css-var-name}: #{$hex-color-value};
    #{$css-var-name}-h: color.hue($hex-color-value);
    #{$css-var-name}-s: color.saturation($hex-color-value);
    #{$css-var-name}-l: color.lightness($hex-color-value);
}

When defining colors using this mixin (e.g. using :root { @include declare-hsl-color(--color-primary, #ff0000); }), this VSCode extension does not recognize the definition. Makes sense, because there is some dynamic stuff going on.

It would be nice if this extension somehow recognizes the definition or provides a way for developers to provide custom parsing rules. E.g. it'd be nice to be able to pass the extension a regex for dynamic CSS variable definitions.

[phoenisx]

Are you looking for a feature like this: https://github.com/willofindie/vscode-cssvar/issues/92

I was planning to add support for injecting variables using some config file, but didn't get time recently. If you are interested in the same feature, let me know we can close this one, in support for the above issue.

[Anoesj]

Replied over there 😄. It might work for my use case with the proposed changes.

[phoenisx]

Closing this in favour of https://github.com/willofindie/vscode-cssvar/issues/92