Show color of Sass variables?

[LoDef]

Would it be possible to show the color of a Sass variable?
For example, if I have a variable declared like this in my Sass setup:

$primaryColor: #77baa8;

which is then used like this:

&.div { background-color: $primaryColor; }

It would be very handy if $primaryColor in the latter example got color highlighted with #77baa8

[MaciejJanyska]

👍 +1

[jrdn91]

I see in v2.3.0 the changelog states this works and you can specify a Configuration option for the sass imports lookup folders? How does this lookup config work? Is there an example of it somewhere?

[LoDef]

@Jordan4jc
From the Settings-file:

// Array of absolute paths to search while perform file lookups.
  "color-highlight.sass.includePaths": [],

No example found though, so I tried various values, both relative and absolute, with front- or backslash, even rebooted VSCode, but no success. It only seems to work when the definition is in the same scss-file, it can't find the definition outside the current file.

    "color-highlight.sass.includePaths": [
      "C:/xampp/htdocs/mysite/theme/scss",
      "src/styles", 
      "scss", 
      "/scss/utils"]

[goodguyry]

I'm looking through the code for help understanding what includePaths is expecting and I don't see any references to it...

[stormwarning]

The Window Output panel was showing this error:

[renderer1] [error] ENOTDIR: not a directory, lstat '/Users/me/project/styles/_vars.color.scss/color.scss'

I was able to get it working with external variables by @importing the filename explicitly. For example:

- @import 'vars.color';

+ @import '_vars.color.scss';

Not ideal, and in my case, flags linter errors. I tried looking into a fix but I'm not sure how this project is even set up — I have version 2.3.0 installed apparently, but GitHub only shows version 2.2.0... 🤔

[mattaningram]

Why does this require configuring include paths anyway? The Atom equivalent of this plugin just seems to grab variables from any SCSS file in your project.

[Mei152]

Agree with @mattaningram. I am trying to migrate to vscode from Atom. This is a feature I really liked in Atom. I have not been able to get it to work. I would like some documentation on color-highlight.sass.includePaths.

[nizzu1102]

Color Highlight - https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight --- it helps me do that.

[nizzu1102]

Color highlight, does that function, but in my case in each file I have to refer to the file where the color variables are with a comment because if not the sinter linter gives me an error,
I import it by calling the file with the color variables (_color-var.scss).
thus.
// @import '../color-var.color';

Color highlight hace esa función, pero en mi caso en cada archivo tengo que hacer referencia al archivo donde se encuentran las variables de color con un comentario porque sino el linter de sass me da error,
la importación la hago llamando al archivo con las variables de color ( _color-var.scss )
de esta forma
// @import '../color-var.color';

[LiamWinterton]

Is there any documentation for includePaths yet, as this still does not work.

[sethstha]

Why don't you guys try Colorize?

[qbicsky]

Why don't you guys try Colorize?

I would need something more subtle than colorize (or I can't see the setting to make it more subtle). I can't remember if what I have is vanilla VS Code, but this small square preceding HEX color is perfect. It would be nice to have the same with Sass variables.

[ronilaukkarinen]

@qbconcept KamiKillertO/vscode-colorize#274

[silviajoy]

I agree this feature would be very helpful to use without the need to explicitly import the variable file

[panyann]

Why don't you guys try Colorize?

Because it doesn't support colorizing the sass variables?

[EzePerucca]

Yes it does.

Open the settings.json and add those lines

[albertochigua]

For Sass...
Use extension...

In settings...

add "SASS"...

result...

[serengia]

Thank you so much @albertochigua

[Azragh]

@albertochigua This sadly only works for directly assigned variables. As soon as a variable gets assigned to another one (or if you try to mix colors or similar) it doesn't work and is therefore useless to me. In Atom (with the "pigments" package) I can do this:

» But the Atom Project was discontinued in dec 2022 so I'm looking forward to use VSC.

I'm desperately searching for an extension which is able to follow color functions and stuff.. Is there anything comparable?

[Azragh]

Any updates on this? I am desperately searching, got so far that I stumbled across my own comment here..

So my VS Code just looks like this when using Colorize and the suggested settings:

I also tried Color Highlight and many others, tinkered with the settings, asked questions on stackoverflow and so on, but no success.

[serengia]

only works for directly assigned variables. As soon as a variable gets assigned to another one

Hi @Azragh , while I don't fully understand what you exactly mean by the above statement... I have been using colorize Vs extension for over 6 months now on a project with multiple pages. After installing the extension, ensure you add SASS in your json settings as @albertochigua highlighted above.