← ClaudeAtlas

gerillasslisted

Use the Gerillass Sass mixin library — loading it, the mixin catalogue, and the argument forms that are easy to get wrong. Use when writing SCSS in a project that has gerillass installed.
selfishprimate/gerillass · ★ 171 · Web & Frontend · score 77
Install: claude install-skill selfishprimate/gerillass
# Gerillass A Sass mixin library: 53 mixins and 23 functions that emit CSS from semantic declarations. It is Sass source only — there is no runtime and no utility classes, so styles live in your stylesheet and your markup stays clean. Full documentation: https://docs.gerillass.com Machine-readable API: `gerillass.json` in this package. ## Loading it Through a bundler (Vite, webpack and most others resolve the package by name): ```scss @use "gerillass" as *; ``` Calling Dart Sass yourself, with its package importer (`new NodePackageImporter()` or `sass --pkg-importer=node`): ```scss @use "pkg:gerillass" as *; ``` Anything else, by pointing a load path at `node_modules/gerillass/scss`: ```scss @use "gerillass" as *; ``` Dart Sass only. LibSass and node-sass are not supported. ## Two names for every mixin Every mixin exists twice: bare (`circle`) and prefixed (`gls-circle`). They are the same mixin. The prefix exists to avoid collisions with other libraries. Pick one and stay with it; do not mix them in a file. With the module system you can namespace instead, which is usually cleaner: ```scss @use "gerillass" as gls; .avatar { @include gls.circle(50px); } ``` ## Getting arguments right The conventions are not uniform across the library, so check before guessing. A mixin that wants a string will not take a bare value: ```scss .a { @include after(42) { color: red; } } // wrong — errors .a { @include after("→") { color: red; } } // right ``` Mixins that reje