Gerillass: The Best Sass Mixin Library
Gerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers.
Gerillass, 2021
The Story Behind Gerillass
Since my early days writing HTML and CSS, I had been building a personal Sass library. A collection of mixins and utilities that I used across projects, solving real problems I encountered in frontend development. I always wanted to make it public, to help other developers streamline their workflows and save them the time I spent figuring things out.
When the pandemic hit and we found ourselves locked indoors, I finally had the time to focus on this project alone. I restructured the codebase, wrote comprehensive documentation, and prepared everything for public release. What started as a personal toolkit evolved into Gerillass, a library now used by thousands of developers worldwide.
Philosophy
Gerillass is built on top of Sass to give developers flexibility and accelerate both performance and creativity. The utilities were developed based on real frontend challenges I faced over the years, drawing inspiration from established frameworks like Bourbon, Susy, Scut, and Bootstrap.
The core principles:
- Practical: Every mixin solves a real problem
- Flexible: Adapts to your workflow, not the other way around
- Performant: Minimal output, maximum efficiency
Features
The library includes 50+ utilities covering essential frontend needs:
Layout & Positioning Mixins like Center, Position, Sizer, and Ratio Box handle common layout challenges. The Escape to Parent utility lets child elements break out of their container constraints.
Responsive Design Breakpoint management made simple with Adaptive, Breakpoint, and device-specific mixins for Smartphone and Tablet. Responsive Image and Responsive Video utilities handle media scaling.
Visual Effects Create shapes with Triangle and Circle mixins. Apply gradients with Linear Gradient, Radial Gradient, and the unique Text Gradient. Add depth with Text Shadow and Text Stroke.
Background Utilities Generate patterns with Background Dots and Background Stripes. Manage images efficiently with Background Image mixin.
Typography Handle text overflow with Ellipsis, customize input placeholders, and control text selection styles.
Structural Tools Clearfix, Border Box, Reset CSS, and Columnizer provide foundational structure for any project.
Installation
Gerillass can be installed via npm, Yarn, or as a Git submodule. It integrates seamlessly with build tools like Gulp, Grunt, and React projects.
npm install gerillass