Sass MarPad: A Sass Mixin

readme.md

sass-marpad

A small Sass mixin for outputting padding / margin classes

Usage

sass-marpad accepts three parameters: $prop, $order and $breakpoint. $prop defaults to margin, while the latter two default to false

$prop is either of the two: padding or margin

$order follows the TRBL flow: top, right, bottom, left

$breakpoint is the max pixel width for the media query and that the class name is rendered with (I currently use it based on Bootstrap's breakpoints) such as 599px, 767px, etc.

At the moment sass-marpad uses a partial Sass file (_sizes.scss) that has a set of variables defined for the spacings which you can get rid of and hardcode the sizes in the mixin if you wish, and the Sass MediaQueries mixin.

example.scss:

// ** Import the Media Queries Mixin ** //
@import 'media-queries';

// ** Import the _sizes partial ** //
@import 'sizes';

// ** Import the mixin file ** //
@import 'sass-marpad';

// ** Include sass-marpad with defaults ** //
@include sass-marpad;

Outputs:

.margin--none { margin: 0; }
.margin--tiny { margin: 0.4rem; }
.margin--smallest { margin: 0.625rem; }
.margin--smaller { margin: 0.75rem; }
.margin--small { margin: 0.86rem; }
.margin--normal { margin: 1rem; }
.margin--medium { margin: 1.2rem; }
.margin--large { margin: 1.4rem; }
.margin--larger { margin: 1.6rem; }
.margin--largest { margin: 1.8rem; }
.margin--huge { margin: 2rem; }

Here is another example, this time passing in the order (t, r, b, l) and a breakpoint:

@include sass-marpad($order: bottom, $breakpoint: 599);

Outputs:

@media only screen and (max-width: 599px) {
    .margin-bottom--599-none { margin-bottom: 0; }
    .margin-bottom--599-tiny { margin-bottom: 0.4rem; }
    .margin-bottom--599-smallest { margin-bottom: 0.625rem; }
    .margin-bottom--599-smaller { margin-bottom: 0.75rem; }
    .margin-bottom--599-small { margin-bottom: 0.86rem; }
    .margin-bottom--599-normal { margin-bottom: 1rem; }
    .margin-bottom--599-medium { margin-bottom: 1.2rem; }
    .margin-bottom--599-large { margin-bottom: 1.4rem; }
    .margin-bottom--599-larger { margin-bottom: 1.6rem; }
    .margin-bottom--599-largest { margin-bottom: 1.8rem; }
    .margin-bottom--599-huge { margin-bottom: 2rem; }
}

That's about it.

Nothing too complicated. I hope you find it useful, and of course hack at will.

_sass-marpad.scss

//  **************************************************  //
//                                                      //
//  Mixin to set padding / margins by breakpoint        //
//                                                      //
//  **************************************************  //

@mixin sass-marpad($prop: margin, $order: false, $breakpoint: false)
{
    @if $breakpoint == false
    {
    	@if $order == false
        {
      	    &--none { #{$prop}: 0; }
            &--tiny { #{$prop}: $tiny; }
            &--smallest { #{$prop}: $smallest; }
            &--smaller { #{$prop}: $smaller; }
            &--small { #{$prop}: $small; }
            &--normal { #{$prop}: $normal; }
            &--medium { #{$prop}: $medium; }
            &--large { #{$prop}: $large; }
            &--larger { #{$prop}: $larger; }
        }
        @else
        {
            &-#{$order}
            {
                &--none { #{$prop}-#{$order}: 0; }
                &--tiny { #{$prop}-#{$order}: $tiny; }
                &--smallest { #{$prop}-#{$order}: $smallest; }
                &--smaller { #{$prop}-#{$order}: $smaller; }
                &--small { #{$prop}-#{$order}: $small; }
                &--normal { #{$prop}-#{$order}: $normal; }
                &--medium { #{$prop}-#{$order}: $medium; }
                &--large { #{$prop}-#{$order}: $large; }
                &--larger { #{$prop}-#{$order}: $larger; }
            }
        }
    }
    @else
    {
        @include max-screen(#{$breakpoint}px)
        {
            @if $order == false
            {
                &--#{$breakpoint}
                {
                    &-none { #{$prop}: 0; }
                    &-tiny { #{$prop}: $tiny; }
                    &-smallest { #{$prop}: $smallest; }
                    &-smaller { #{$prop}: $smaller; }
                    &-small { #{$prop}: $small; }
                    &-normal { #{$prop}: $normal; }
                    &-medium { #{$prop}: $medium; }
                    &-large { #{$prop}: $large; }
                    &-larger { #{$prop}: $larger; }
                }
            }
            @else
            {
                &-#{$order}--#{$breakpoint}
                {
                    &-none { #{$prop}-#{$order}: 0; }
                    &-tiny { #{$prop}-#{$order}: $tiny; }
                    &-smallest { #{$prop}-#{$order}: $smallest; }
                    &-smaller { #{$prop}-#{$order}: $smaller; }
                    &-small { #{$prop}-#{$order}: $small; }
                    &-normal { #{$prop}-#{$order}: $normal; }
                    &-medium { #{$prop}-#{$order}: $medium; }
                    &-large { #{$prop}-#{$order}: $large; }
                    &-larger { #{$prop}-#{$order}: $larger; }
                }
            }
        }
    }
}

_sizes.scss

//  **************************************************  //
//                                                      //
//  Sizes                                               //
//                                                      //
//  **************************************************  //

$tiny: .4rem;
$smallest: .625rem;
$smaller: .75rem;
$small: .86rem;
$normal: 1rem;
$medium: 1.2rem;
$large: 1.4rem;
$larger: 1.6rem;
$largest: 1.8rem;
$huge: 2rem;