stylingutilities/stylingutilities/spacing.styl

lightweight css utilities library for the front-end web

// the amount of space to increment every sizing-level
sizing-spacer = .25rem
// the max css margin and padding size level class to generate (i.e. 10 = create .m-1 to .m-10)
sizing-level = 10
spacing-class-prefix = ""

for num in (1..sizing-level) {
    .{spacing-class-prefix}m-{num} {
        margin sizing-spacer * num
    }

    .{spacing-class-prefix}mx-{num} {
        margin-left sizing-spacer * num
        margin-right sizing-spacer * num
    }
    
    .{spacing-class-prefix}my-{num} {
        margin-top sizing-spacer * num
        margin-bottom sizing-spacer * num
    }

    .{spacing-class-prefix}p-{num} {
        padding sizing-spacer * num
    }

    .{spacing-class-prefix}px-{num} {
        padding-left sizing-spacer * num
        padding-right sizing-spacer * num
    }

    .{spacing-class-prefix}py-{num} {
        padding-top sizing-spacer * num
        padding-bottom sizing-spacer * num
    }
}