This extension is an addition to the With Stylo library for SASS/SCSS. It provides ready-to-use snippets that will significantly speed up your development workflow by allowing you to quickly insert mixins, utilities, and common patterns with just a few keystrokes.
Instead of typing everything manually, you can focus on building features faster while maintaining clean and consistent code.
Examples
How to Use
All snippets use the prefix with - simply type with in your SCSS files and select the desired snippet from the suggestions
Quickly insert mixins for buttons, layouts, backgrounds, text styles, and more
Each snippet includes helpful comments explaining parameters and usage
Available Snippets
The extension includes snippets for:
Button styles and variants
Layout utilities (flexbox, grid, containers)
Background helpers
Typography mixins
Spacing utilities
Responsive design helpers
Animation shortcuts
Installation
For Vanilla Projects
Install the package:
npm install with-stylo
Compile your SCSS files with the correct load path:
npx sass --watch your-file.scss:your-file.css --load-path=node_modules
Import With Stylo in your SCSS file:
@use "with-stylo" as *;
Import With Stylo in your SCSS file:
@use "with-stylo" as *;
Key Features
Rapid development: Access all With Stylo mixins with minimal typing
Consistent code: Maintain uniform styling across your project
Comprehensive coverage: Snippets for all major styling categories
Documentation included: Each snippet has helpful comments
Team friendly: Standardized approach improves collaboration
Why Choose With Stylo
With Stylo is designed to give developers complete control and flexibility over their SASS/SCSS workflow:
Actively maintained: Regular updates with new features and mixins
Separation of concerns: Clean division between HTML, CSS, and JavaScript
Self-documenting: Comprehensive comments make code easy to understand
Team-friendly: Consistent patterns help developers quickly understand project structure
Support
For issues or suggestions regarding the VS Code snippets, please visit our GitHub repository. For questions about the With Stylo library itself, refer to the main package documentation.
Happy coding! Use the with prefix to discover all available snippets and accelerate your styling workflow.
