OOCSS-ish spacing classes, a stylus mixin

Jens Nilsson on

This is a stylus-mixin that I always use to generate a set of easy to use CSS-classes for spacing (margin/padding).
This example will generate a scale from 10px up to 80px with steps of 10.


    Usage: {shorthand for rule}{shorthand for direction}{integer-index}

    {shorthand for rule}
    p - padding
    m - margin

    {shorthand for direction}
    t - top
    r - right
    b - bottom
    l - left
    v - vertical
    h - horizontal
    a - all



t(rule, size, u)
    {rule}-top (u ? unit(size, u) : size)
r(rule, size, u)
    {rule}-right (u ? unit(size, u) : size)
b(rule, size, u)
    {rule}-bottom (u ? unit(size, u) : size)
l(rule, size, u)
    {rule}-left (u ? unit(size, u) : size)
v(rule, size, u)
    t(rule, size, u)
    b(rule, size, u)
h(rule, size, u)
    r(rule, size, u)
    l(rule, size, u)
a(rule, size, u)
    {rule} (u ? unit(size, u) : size)

spacing(base, numSizes)
    for n in a v h t r b l
        for m in 0..numSizes
                n(padding, (m*base), "px")
                n(margin, (m*base), "px")
            n(margin, auto, false)

spacing(10, 8)


The class names are structured like so:
.{shorthand for rule}{shorthand for direction}{integer-index}

So if you for example need 10px margin on the right side of an element you simply use the class .mr1

Some examples:

.pt1 - Padding Top 10px
.mv3 - Margin Vertical (top/bottom) 30px
.ph2 - Padding Horizontal (right/left) 20px
.mb4 - Margin Bottom 40px

The mixin is also available as a gist.