SusyCSS: Susy without Sass

This is a near-complete implementation of
Susy 3,
built entirely with CSS Variables (custom properties).

Check out the Demo »

(this pen is intentionally unstyled,
containing only CSS variables,
so that it can be pasted anywhere)


Global Settings

These variables should be set
on the :root element,
so that they inherit.

For fully-static grids, set --susy-static-grid.
For static-gutters on an otherwise fluid grid,
set --susy-static-gutters.
If either value is true,
make sure you set the desired column-width.

Returned Values

These variables represent Susy's output —
like the return value from a Sass function.
They can be applied to any property,
or used inside calc()
for more complex math.
Don't set these, just use them!

"Mixins"

These variables work like mixins,
automatically applying returned values
to specific properties.

Debug Values

These values need to be used together,
applied to the background and background-size
properties respectively.

As always,
the background grid gradient for debugging
doesn't handle sub-pixel rounding.
That's nothing new.
Maybe we could build an inline-svg background
using custom properties as well?
Something to try!


Advantages

  1. SusyCSS understands the DOM structure! Settings actually inherit!
  2. No Sass required!

Limitations

  1. CSS has no necessary control structures,
    so the syntax & settings are bulkier.
  2. SusyCSS doesn't support asymmetrical grids.
  3. Within the context of a single selector,
    each variable can only have a single value.
    There is no way to pass different arguments.
  4. Why build this much flexibility into a single code base?

ToDo:

  1. Can we make an inline-svg grid image?