The first AI-ready Sass mixin library for modern web design.
Gerillass is a set of mixins and functions built on top of Sass. Every one of them ships with a manifest the test suite verifies, so a coding agent cannot work from stale docs.
npm install gerillass --save-devSetting up Vite, webpack or another build tool? See the installation guide.
Sass mixins for you and your AI agent
Write responsive, accessible modern CSS, with a manifest that tells coding agents how every mixin works.
Media QueriesSass media query and container query mixins
Named sizes or raw lengths, for the viewport or a container. A mistyped size stops the build instead of writing a query that never matches.
Modern CSSFluid typography and line clamp
Fluid font sizes with a clamp() that follows browser text zoom, multi-line truncation that works, plus accessible focus rings and reduced motion.
AI Coding AgentsA Sass library AI coding agents use correctly
A tested manifest and a SKILL.md for Claude Code and other agents. A bad argument stops the build with a clear message.
Install AnywhereInstall from npm or RubyGems
56 mixins and 23 functions for Dart Sass, with no runtime dependencies. Works with Vite, webpack, Parcel, Rails, Jekyll and plain Ruby.
- Breakpoint
Create responsive design layouts via Sass, Gerillass and CSS3 Media Queries.
- Font Face
Generate cross-browser compatible @font-face declerations with one line of code.
- Remove
Remove any element from the document flow with the power of Remove and Breakpoint Sass mixins together.
- Except
You want to apply some style changes to the items within a list, but not all. Well, consider it done.
- Line Clamp
Truncate text after a set number of lines with CSS line clamp, and every declaration it needs to work.
- Fluid
Create fluid typography with a CSS clamp() value in one line of code.
Breakpoint Sass mixin for CSS Media Queries
This Sass mixin will help you to write CSS media queries in Sass, and generate consistent responsive layouts. Provides an easy to use one-line method.
You can set a range between two values (predefined or custom values will be just fine) to apply our styles.
.element {
@include breakpoint(small, large) {
background-color: red;
}
}It will generate the CSS code below..
@media (min-width: 576px) and (max-width: 991px) {
.element {
background-color: red;
}
}* This is just a simple demonstration of Breakpoint Sass mixin. For more cool features please checkout the documentation or see the source code on Github!
What they say?
If you like the content, please say something about us. Share your thoughts on Twitter, help this project grow!
- Frontend DeveloperErdal Yenigul
This is the one of best Sass mixins toolset. Don't be shy try it! #sass #css
- Software EngineerMuhammed M. Kilic
If you are afraid of #css like me, this #sass library is exactly for you: @gerillass is easy to understand and ridiculously simple to implement.
- UI/UX DesignerKenan Gundogan
It looks great, I will definitely include it in the projects I am developing.
- UI/UX DesignerHalil I. Cakiroglu
Rapidly-produce consistent and scalable CSS outputs regardless of the size of the projects you're working on. #gerillass @gerillass
SAY SOMETHING ABOUT US!