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: 14 days 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 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-12T04:58:29.000Z (about 1 year ago)
• Last Synced: 2024-08-01T16:56:22.159Z (3 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: 946 KB
• Stars: 242
• Watchers: 2
• Forks: 4
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.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]: ./feature-contributions.md

[customize-extension-link]: ./docs/customize-extension.md

[theme-link]: ./docs/theming.md

[debug-link]: ./docs/debug-extension.md