PostCSS Mixins Autocomplete
A Visual Studio Code extension that provides autocomplete suggestions for PostCSS mixins defined in your project.
Features
- Automatically detects mixin definitions in your CSS/PostCSS files using
@define-mixin
- Provides autocomplete suggestions when typing
@mixin
- Supports both
.css and .pcss file extensions
- Updates in real-time as you add or modify mixins
- Configurable file patterns for watching CSS files
Installation
Install from https://marketplace.visualstudio.com/items?itemName=fongandrew.postcss-mixins-autocomplete
Or install manually:
Usage
- Define your mixins in your CSS/PostCSS files using
@define-mixin :
@define-mixin button {
padding: 10px 20px;
border-radius: 4px;
/* ... */
}
- Start typing
@mixin in your CSS/PostCSS files, and the extension will suggest available mixins:
.my-button {
@mixin button;
}
Requirements
- Visual Studio Code version 1.96.0 or higher
- PostCSS files in your project using
@define-mixin syntax
Extension Settings
This extension adds the following settings:
postcssMixinsAutocomplete.cssFilePatterns : Array of glob patterns for files to watch for mixin definitions.
Default: ["**/*.{css,pcss,postcss}"]
Example configuration in settings.json:
{
"postcssMixinsAutocomplete.cssFilePatterns": [
"**/*.css",
"**/*.pcss",
"src/**/*.postcss"
]
}
Known Issues
None currently.
| |