Skip to content

Instantly share code, notes, and snippets.

@kevinruscoe
Created December 2, 2015 11:00
Show Gist options
  • Save kevinruscoe/e27394c69ad09bfc6793 to your computer and use it in GitHub Desktop.
Save kevinruscoe/e27394c69ad09bfc6793 to your computer and use it in GitHub Desktop.
margin-utils.scss
$spacer-xs: .25em;
$spacer-sm: .5em;
$spacer-md: 1em;
$spacer-lg: 1.5em;
$spacer-xl: 2em;
// Margin Top
.mar-t-xs {
margin-top: $spacer-xs;
}
.mar-t-sm {
margin-top: $spacer-sm;
}
.mar-t-md {
margin-top: $spacer-md;
}
.mar-t-lg {
margin-top: $spacer-lg;
}
.mar-t-xl {
margin-top: $spacer-xl;
}
// Margin Bottom
.mar-b-xs {
margin-bottom: $spacer-xs;
}
.mar-b-sm {
margin-bottom: $spacer-sm;
}
.mar-b-md {
margin-bottom: $spacer-md;
}
.mar-b-lg {
margin-bottom: $spacer-lg;
}
.mar-b-xl {
margin-bottom: $spacer-xl;
}
// Margin Left
.mar-l-xs {
margin-left: $spacer-xs;
}
.mar-l-sm {
margin-left: $spacer-sm;
}
.mar-l-md {
margin-left: $spacer-md;
}
.mar-l-lg {
margin-left: $spacer-lg;
}
.mar-l-xl {
margin-left: $spacer-xl;
}
// Margin Right
.mar-r-xs {
margin-right: $spacer-xs;
}
.mar-r-sm {
margin-right: $spacer-sm;
}
.mar-r-md {
margin-right: $spacer-md;
}
.mar-r-lg {
margin-right: $spacer-lg;
}
.mar-r-xl {
margin-right: $spacer-xl;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment