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: 6 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 (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T07:43:51.000Z (9 months ago)
- Last Synced: 2025-01-14T08:24:19.193Z (9 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: 1.08 MB
- Stars: 260
- Watchers: 2
- Forks: 5
- Open Issues: 23
-
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
Please vote/rate and star this project to show your support.
❤️
## 💡 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