Overview

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.

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

1. Install the package: npm install with-stylo

2. Compile your SCSS files with the correct load path: npx sass --watch your-file.scss:your-file.css --load-path=node_modules

3. Import With Stylo in your SCSS file: @use "with-stylo" as *;

For Webpack Projects (React/Next.js)

1. Install With Stylo: npm install with-stylo

2. Install Sass/SCSS support: npm install sass --save-dev

3. 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.