This Extension supports the following properties as of now:
Settings
Setting | Description | Type | Default |
---|---|---|---|
cssvar.enable |
Enable/Disable extension for a workspace/folder | boolean |
true |
cssvar.files |
Relative/Absolute paths to CSS variable source files | string[] |
["**/*.css"] |
cssvar.ignore |
Relative/Absolute paths to file/folder sources to be ignored | string[] |
["**/node_modules/**"] |
cssvar.extensions
Use language identifiers mentioned in this doc |
File extensions in which IntelliSense will be enabled | string[] |
[
"css",
"scss",
"sass",
"less",
"postcss",
"vue",
"svelte",
"astro",
"ts",
"tsx",
"js",
"jsx"
] |
cssvar.themes
Helps to bucket CSS variables based on themes used in any project |
CSS Theme class names used in source files E.g. ["dark","dim"] |
string[] |
[] |
cssvar.excludeThemedVariables
If true , hides duplicate theme variables from the list
|
Exclude themed variables to remove unnecessary duplicates | boolean |
false |
cssvar.disableSort
Intellisense list won't be sorted |
Disables default sorting applied by VSCode | boolean |
false |
cssvar.enableColors |
Enable VSCode's Color Representation feature when true |
boolean |
true |
cssvar.enableGotoDef |
Enable VSCode's Goto Definition feature for CSS Variable | boolean |
true |
cssvar.enableHover |
Enable VScode's Hover IntelliSense feature for CSS Variables | boolean |
true |
cssvar.postcssSyntax
Details for this can be read here: Customize Extension |
Provides custom syntax parser for the mapped file extensions. E.g. {
"sugarss": ["sss"]
} |
Record<string,string[] |
{} |
cssvar.postcssPlugins
Provide PostCSS Plugins to support custom CSS features |
E.g. ["postcss-nested"] [[
"postcss-nested",
{"unwrap": ["phone"]}
]] |
string[]
| [
string,
object
][] |
[] |
cssvar.mode
Enable/Disable CSS variable linting modes. |
E.g. ["error", {
ignore: [
"--dynamic",
"dy[nN].*?c$"
]
}] |
string
| [
string,
{ignore: string[]}
] |
"off" |
Supported Languages/Extensions
Any file with extensions .css
and .postcss
will be treated as CSS file.
Any file with extensiosn .scss
and sass
will be treated as SCSS and SASS files respectively.
Any file with extension .less
will be treated as LESS file.
Any file with extension .svelte
will be treated as Svelte file.
Any file with extension .vue
will be treated as Vue file.
Any file with extension .astro
will be treated as Astro file.
Any file with extension .js
or .jsx
will be treated as Javascript files.
Any file with extension .ts
or .tsx
will be treated as Typescript files.
To support more extension/languages where this extension can trigger it's IntelliSense, please raise a request
To enable this extension for less languages, use cssvar.extensions
settings to override the defaults.