Skip to content

Instantly share code, notes, and snippets.

@feload
Created January 21, 2019 15:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save feload/bbb473eda306274e2a2c8e51cbd80eb4 to your computer and use it in GitHub Desktop.
Save feload/bbb473eda306274e2a2c8e51cbd80eb4 to your computer and use it in GitHub Desktop.
Margin and padding for sass.
@mixin mt($px) { margin-top: $px; }
@mixin mb($px) { margin-bottom: $px; }
@mixin ml($px) { margin-left: $px; }
@mixin mr($px) { margin-right: $px; }
@mixin ma($px) { margin: $px; }
@mixin mx($px) { @include ml($px); @include mr($px); }
@mixin my($px) { @include mt($px); @include mb($px); }
@mixin pt($px) { padding-top: $px; }
@mixin pb($px) { padding-bottom: $px; }
@mixin pl($px) { padding-left: $px; }
@mixin pr($px) { padding-right: $px; }
@mixin pa($px) { padding: $px; }
@mixin px($px) { @include pl($px); @include pr($px); }
@mixin py($px) { @include pt($px); @include pb($px); }
@for $l from 0 through 10{
$i: #{$l * 5};
.mt-#{$i}{ @include mt($i+'px'); }
.mb-#{$i}{ @include mb($i+'px'); }
.ml-#{$i}{ @include ml($i+'px'); }
.mr-#{$i}{ @include mr($i+'px'); }
.ma-#{$i}{ @include ma($i+'px'); }
.my-#{$i}{ @include my($i+'px'); }
.pt-#{$i}{ @include pt($i+'px'); }
.pb-#{$i}{ @include pb($i+'px'); }
.pl-#{$i}{ @include pl($i+'px'); }
.pr-#{$i}{ @include pr($i+'px'); }
.pa-#{$i}{ @include pa($i+'px'); }
.py-#{$i}{ @include py($i+'px'); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment