https://github.com/willofindie/vscode-cssvar
VSCode extension to support CSS Variables Intellisense
https://github.com/willofindie/vscode-cssvar
autocomplete css css-custom-properties css-variables cssvar cssvariables extension suggestion var variables variables-css visual-studio-code vscode vscode-extensions
Last synced: 2 months ago
JSON representation
VSCode extension to support CSS Variables Intellisense
- Host: GitHub
- URL: https://github.com/willofindie/vscode-cssvar
- Owner: willofindie
- License: mit
- Created: 2021-03-26T09:05:50.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T08:43:39.000Z (over 1 year ago)
- Last Synced: 2025-11-23T15:15:21.748Z (5 months ago)
- Topics: autocomplete, css, css-custom-properties, css-variables, cssvar, cssvariables, extension, suggestion, var, variables, variables-css, visual-studio-code, vscode, vscode-extensions
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
- Size: 792 KB
- Stars: 276
- Watchers: 1
- Forks: 7
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
CSS Variables (Archived)
Please vote/rate and star this project to show your support.
❤️
**Archive Notice**
> Hi everyone! Thanks so much for all the support over the years — I really appreciate it. 🙏
> I want to share that I no longer have the time or interest to continue maintaining this project.
> I started this project to help out my friend and never expected for it to get this much
> attention. All thanks to @jjenzz for sharing this extension.
>
> I learned a lot working on this, and I’m grateful for the experience. If you’re looking for an
> actively maintained VS Code extension for CSS custom variables, check out:
> https://github.com/vunguyentuan/vscode-css-variables
## 💡 Features:
This extension helps provide autocompletion IntelliSense
for globally shared CSS Variables and more.
### How the extension works:
- When adding a new CSS declaration property value, press `--`.
- This opens a completion list dropdown, with all the CSS variables in the list.
- Select and add the variable of your choice, to autocomplete.
### Auto Completion, Color swatches, Goto Definition
This extension has in-built support for parsing: `css`, `scss`, `less`, `js`, `jsx`, `ts`, `tsx`
source file extensions and providing CSS variable suggestions from them.
Details can be read in [Customization Doc][customize-extension-link].
### Customization
If your project uses `sass` or `styl` or some other custom source file extension, and you are
facing issues to setup this VSCode extension, please read
[Customization][customize-extension-link] Doc.
### Theme Support
Read more about [Theming here][theme-link]
### CSS Level 4 color spec support
Limited support to keep bundle size small.
Except for `color()` api, every other CSS color is supported.
Please find details for CSS colors [here in MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
## 🔖 Appendix:
- [Extension setting details][settings-link]
- [Extension Customization][customize-extension-link]
- [Theming Support][theme-link]
- [Debugging the extension][debug-link]
[settings-link]: https://github.com/willofindie/vscode-cssvar/blob/main/feature-contributions.md
[customize-extension-link]: https://github.com/willofindie/vscode-cssvar/blob/main/docs/customize-extension.md
[theme-link]: https://github.com/willofindie/vscode-cssvar/blob/main/docs/theming.md
[debug-link]: https://github.com/willofindie/vscode-cssvar/blob/main/docs/debug-extension.md