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?
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?
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.
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?
I’ve just tested it. The reaction is the same in safe mode, no display of the colors.
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.
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:
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!
when I uninstall the CSS3 package, my .css files have no syntax highlighting. The variable colors are of course also not displayed. Status bar syntax is Plain Text, despite correct file names .css
When I change syntax in menu to CSS, I have color hightlighting, but not the display of the variable colors.
The trick is, I need to enter the first minus in the parenthesis, then the colors are displayed: “var(-)”.
I was not aware of this procedure before, other editors display the colors a little faster after entering “var”.
Many thanks for your patience in answering my question. It’s very helpful with thousands lines of code.
