Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode-Colorize not working for renamed and prefixed SCSS/SASS variables #813

Open
Code-Mythos opened this issue Jun 12, 2022 · 5 comments

Comments

@Code-Mythos
Copy link

I've been using Colorize for a long time. I have a real problem with using this practical extension when renaming SCSS variables or when I use (@forward "...path" as color-*;).

in _colors.scss:

$primary-1: #eee;
$secondary-1:#fff;

in _variables.scss:

@forward "./colors" as color-*;
...

following call of variable works with Colorize extension:

@use "../../colors" as colorsVar;

$bgColor1 : colorsVar.$primary-1;

but following methods do not work at all:

@use"../../variables" as vars;

bgColor2: vars.$color-primary-1;

or when rename the variables again.

Best regards.

@LuWa-at-work
Copy link

With lighter / darker i have similar problems

@use 'colors/ci';

$notify_orange:           ci.$darkorange; /*colored*/
$notify_orange_light_0:   lighten($notify_orange/*NOT colored*/, 25%);
$notify_orange_light_1:   lighten(orange/*colored*/, 25%);

$tmp_0: $notify_orange_light; /*NOT colored*/;
$tmp_1: $notify_orange_light_1; /*NOT colored*/;

@Azragh
Copy link

Azragh commented Feb 9, 2023

Same here. In Atom I am able to do this (with the "pigments" package enabled):

image

And then reassign the variables to other ones:

image

They convert even to RGBA:

image

Without this it's really hard to switch to VSC.. It seems there is no other plugin which is able to follow color variables and functions so im posting this here.

@krsbrown
Copy link

Same here. Atom was great showing the color variants. This is my biggest hangup switching from Atom to VS code.

For example, these don't show the color when the variables are used elsewhere.
$color-primary-darkest: darken($color-primary, 10%);
$color-primary-dark: darken($color-primary, 5%);
$color-primary-light: lighten($color-primary, 5%);
$color-primary-lightest: lighten($color-primary, 10%);

Only the initial one works
$color-primary: #4d4d4f;

If there is a workaround, without having to set an actual hex for each variant, I'd like to know.

@Azragh
Copy link

Azragh commented May 16, 2023

@krsbrown Until now I'm still developing with atom for that one reason. If this would work I'd switch immediately.

@KamiKillertO
Copy link
Owner

Support for variables is still limited right now. I'm working on a new version that will rely on language server and should make it possible to support this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants