Skip to content

Instantly share code, notes, and snippets.

@conwayanderson
Last active December 30, 2015 17:32
Show Gist options
  • Save conwayanderson/eeb43994360a7ea19455 to your computer and use it in GitHub Desktop.
Save conwayanderson/eeb43994360a7ea19455 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
$properties: (
margin: 'm',
padding: 'p'
);
$directions: (
left: 'l',
right: 'r',
bottom: 'b',
top: 't',
);
$sizes: (
xxl: 96px,
xl: 48px,
md: 24px,
sm: 16px,
xs: 12px,
xxs: 8px,
none: 0px
);
@each $property, $property-abbreviation in $properties {
@each $size, $unit in $sizes {
.#{$property-abbreviation}-#{$size} {
#{$property}: $unit;
}
.#{$property-abbreviation}h-#{$size} {
#{$property}-left: $unit;
#{$property}-right: $unit;
}
.#{$property-abbreviation}v-#{$size} {
#{$property}-top: $unit;
#{$property}-bottom: $unit;
}
}
@each $direction, $direction-abbreviation in $directions {
@each $size, $unit in $sizes {
.#{$property-abbreviation}#{$direction-abbreviation}-#{$size} {
#{$property}-#{$direction}: $unit;
}
}
}
}
.m-xxl {
margin: 96px;
}
.mh-xxl {
margin-left: 96px;
margin-right: 96px;
}
.mv-xxl {
margin-top: 96px;
margin-bottom: 96px;
}
.m-xl {
margin: 48px;
}
.mh-xl {
margin-left: 48px;
margin-right: 48px;
}
.mv-xl {
margin-top: 48px;
margin-bottom: 48px;
}
.m-md {
margin: 24px;
}
.mh-md {
margin-left: 24px;
margin-right: 24px;
}
.mv-md {
margin-top: 24px;
margin-bottom: 24px;
}
.m-sm {
margin: 16px;
}
.mh-sm {
margin-left: 16px;
margin-right: 16px;
}
.mv-sm {
margin-top: 16px;
margin-bottom: 16px;
}
.m-xs {
margin: 12px;
}
.mh-xs {
margin-left: 12px;
margin-right: 12px;
}
.mv-xs {
margin-top: 12px;
margin-bottom: 12px;
}
.m-xxs {
margin: 8px;
}
.mh-xxs {
margin-left: 8px;
margin-right: 8px;
}
.mv-xxs {
margin-top: 8px;
margin-bottom: 8px;
}
.m-none {
margin: 0px;
}
.mh-none {
margin-left: 0px;
margin-right: 0px;
}
.mv-none {
margin-top: 0px;
margin-bottom: 0px;
}
.ml-xxl {
margin-left: 96px;
}
.ml-xl {
margin-left: 48px;
}
.ml-md {
margin-left: 24px;
}
.ml-sm {
margin-left: 16px;
}
.ml-xs {
margin-left: 12px;
}
.ml-xxs {
margin-left: 8px;
}
.ml-none {
margin-left: 0px;
}
.mr-xxl {
margin-right: 96px;
}
.mr-xl {
margin-right: 48px;
}
.mr-md {
margin-right: 24px;
}
.mr-sm {
margin-right: 16px;
}
.mr-xs {
margin-right: 12px;
}
.mr-xxs {
margin-right: 8px;
}
.mr-none {
margin-right: 0px;
}
.mb-xxl {
margin-bottom: 96px;
}
.mb-xl {
margin-bottom: 48px;
}
.mb-md {
margin-bottom: 24px;
}
.mb-sm {
margin-bottom: 16px;
}
.mb-xs {
margin-bottom: 12px;
}
.mb-xxs {
margin-bottom: 8px;
}
.mb-none {
margin-bottom: 0px;
}
.mt-xxl {
margin-top: 96px;
}
.mt-xl {
margin-top: 48px;
}
.mt-md {
margin-top: 24px;
}
.mt-sm {
margin-top: 16px;
}
.mt-xs {
margin-top: 12px;
}
.mt-xxs {
margin-top: 8px;
}
.mt-none {
margin-top: 0px;
}
.p-xxl {
padding: 96px;
}
.ph-xxl {
padding-left: 96px;
padding-right: 96px;
}
.pv-xxl {
padding-top: 96px;
padding-bottom: 96px;
}
.p-xl {
padding: 48px;
}
.ph-xl {
padding-left: 48px;
padding-right: 48px;
}
.pv-xl {
padding-top: 48px;
padding-bottom: 48px;
}
.p-md {
padding: 24px;
}
.ph-md {
padding-left: 24px;
padding-right: 24px;
}
.pv-md {
padding-top: 24px;
padding-bottom: 24px;
}
.p-sm {
padding: 16px;
}
.ph-sm {
padding-left: 16px;
padding-right: 16px;
}
.pv-sm {
padding-top: 16px;
padding-bottom: 16px;
}
.p-xs {
padding: 12px;
}
.ph-xs {
padding-left: 12px;
padding-right: 12px;
}
.pv-xs {
padding-top: 12px;
padding-bottom: 12px;
}
.p-xxs {
padding: 8px;
}
.ph-xxs {
padding-left: 8px;
padding-right: 8px;
}
.pv-xxs {
padding-top: 8px;
padding-bottom: 8px;
}
.p-none {
padding: 0px;
}
.ph-none {
padding-left: 0px;
padding-right: 0px;
}
.pv-none {
padding-top: 0px;
padding-bottom: 0px;
}
.pl-xxl {
padding-left: 96px;
}
.pl-xl {
padding-left: 48px;
}
.pl-md {
padding-left: 24px;
}
.pl-sm {
padding-left: 16px;
}
.pl-xs {
padding-left: 12px;
}
.pl-xxs {
padding-left: 8px;
}
.pl-none {
padding-left: 0px;
}
.pr-xxl {
padding-right: 96px;
}
.pr-xl {
padding-right: 48px;
}
.pr-md {
padding-right: 24px;
}
.pr-sm {
padding-right: 16px;
}
.pr-xs {
padding-right: 12px;
}
.pr-xxs {
padding-right: 8px;
}
.pr-none {
padding-right: 0px;
}
.pb-xxl {
padding-bottom: 96px;
}
.pb-xl {
padding-bottom: 48px;
}
.pb-md {
padding-bottom: 24px;
}
.pb-sm {
padding-bottom: 16px;
}
.pb-xs {
padding-bottom: 12px;
}
.pb-xxs {
padding-bottom: 8px;
}
.pb-none {
padding-bottom: 0px;
}
.pt-xxl {
padding-top: 96px;
}
.pt-xl {
padding-top: 48px;
}
.pt-md {
padding-top: 24px;
}
.pt-sm {
padding-top: 16px;
}
.pt-xs {
padding-top: 12px;
}
.pt-xxs {
padding-top: 8px;
}
.pt-none {
padding-top: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment