Auto-complete variable names

[kazu]

I totally miss the auto-complete when I enter e.g.
background: var(…
for colors, “var(–name);” is displayed. Why not the included :root colors?

My online search revealed that this was abolished with ver. 4. Mmhhh. I really miss it because I have to go to the top of my file to get the value and back again to pass it. That takes time.

Surely there is a solution for displaying the variable names?

[deathaxe]

Seems to work here using built-in css completions plugin of ST4199

[kazu]

It doesn’t work for me, ST4200. it looks like this for me:

Surely I can’t install it manually if it’s part of the core?

[deathaxe]

ST4199 and 4200 are literly the same.

It is just working fine on both using ST’s default CSS syntax.

If you happen to use 3rd-party CSS3 package, you are right. This package doesn’t support variable completions and various functions.

I strongly recommend to no longer use this package in modern ST world and rely only on default CSS package shipped with ST.

[kazu]

I deleted all packages that have anything to do with CSS. No :root colors are shown. When I select “var()”, var(–name) is inserted.
As it does not work as it is - is there a package that makes this function possible?

[bschaaf]

Does it work in safe mode?

[kazu]

I’ve just tested it. The reaction is the same in safe mode, no display of the colors.

[deathaxe]

Well, here’s ST4200 complete fresh install with SAFE MODE on Windows with a new unsaved view set to CSS syntax and entering a code snippet according to my understanding of your problem.

Both, var() and --my-cololor are provided by auto-completion just fine.

The code snippet:

:root {
	--my-color: red;
}

tr {
	background-color: var();
}

Maybe provide a detailed code snippet which doesn’t work, if illustrated one doesn’t match your use case, just to ensure we don’t miss any relevant detail which could be causing you trouble.

[kazu]

Maybe it’s the OS. I have macOS 12.7, so maybe?

A new CSS file with just a few lines:

:root {
	--body-bg-color: #FFFFFF;
	--secondary-bg-color: #B0E1FF;
	--main-txt-color: #424548;
	--accent-color: #1E64B4;
}

.container {
	background: var(--name);
}

When I enter the three letters var the following appears:

If I click on var(), the following is entered:

[deathaxe]

Well, to finally repeat myself - this is exactly what it is looking for me with CSS3 package installed.

Pay attention to status bar syntax indicator “CSS3”!

Remove it to fix it!