susy-sass3 3.1.0

susy-sass3 is a maintained continuation of Susy 3, modernized to run on Dart Sass and current Node.js. The grid API is unchanged from Susy 3 — this fork simply keeps it building on the current Sass toolchain.

susy-sass3 is a design-agnostic set of tools for creating powerful, custom layouts. We didn’t want another grid system full of rules and restrictions — we wanted a power tool for building our own damn systems.

susy-sass3 is trimmed down to its most basic components: a small set of functions that can be used to build any grid system. There are no mixins — you apply the grid math yourself, wherever you need it (width, margin, padding, flex-basis, transform, and so on).

Your markup, your design, your opinions | our math.

Note

These docs describe susy-sass3 3.1.0. Full credit for the original design and code goes to Miriam Eric Suzanne and OddBird. The upstream Susy project is deprecated; susy-sass3 continues it on Dart Sass.

Contents

• Getting Started
• Why susy-sass3 Is Just Functions
• Settings
• Shorthand
• Understanding Spread
• Toolkit
• Upgrade Path
• The Su Math Layer
• Changelog

Susy vs Su

You’ll notice that some functions carry a susy- prefix, while others only have su-. This marks the two distinct layers inside susy-sass3:

• The core grid-math layer is called Su. It’s made up of “pure” functions (su-span, su-gutter, su-slice) that expect fully-normalized values. Use it if you prefer argument-syntax to shorthand, or if you’re building your own extensions.

• The upper Susy layer provides the syntax-sugar: global defaults, shorthand parsing, and normalization. This is the primary API for most users — span, gutter, and slice.

New here? Start with Why susy-sass3 Is Just Functions for the thinking behind the functions-only API. And since spread — how many gutters a span includes at its edges — is the concept that trips people up most often, the Understanding Spread page walks through it in detail.

Note

This isn’t neverland, and susy-sass3 isn’t magic. We’re still talking about web design in a world where browsers disagree on implementation, standards are not always the standard, and your Sass code compiles into Boring Old CSS.

Don’t rely on susy-sass3 to solve all your problems — the table-saw can’t build your house for you. If you don’t understand what susy-sass3 is doing, take a look at the output CSS, dig around, and find your own path. Nothing here is sacred, just a set of tools to help make your life easier.