Skip to content

Instantly share code, notes, and snippets.

@shirashin
Last active August 29, 2015 14:05
Show Gist options
  • Select an option

  • Save shirashin/f824519a9eb3652e942d to your computer and use it in GitHub Desktop.

Select an option

Save shirashin/f824519a9eb3652e942d to your computer and use it in GitHub Desktop.
use sass version: sass3.2
.m-0 {
margin: 0px !important;
}
.mt-0 {
margin-top: 0px !important;
}
.mr-0 {
margin-right: 0px !important;
}
.mb-0 {
margin-bottom: 0px !important;
}
.ml-0 {
margin-left: 0px !important;
}
.p-0 {
padding: 0px !important;
}
.pt-0 {
padding-top: 0px !important;
}
.pr-0 {
padding-right: 0px !important;
}
.pb-0 {
padding-bottom: 0px !important;
}
.pl-0 {
padding-left: 0px !important;
}
.m-5 {
margin: 5px !important;
}
.mt-5 {
margin-top: 5px !important;
}
.mr-5 {
margin-right: 5px !important;
}
.mb-5 {
margin-bottom: 5px !important;
}
.ml-5 {
margin-left: 5px !important;
}
.p-5 {
padding: 5px !important;
}
.pt-5 {
padding-top: 5px !important;
}
.pr-5 {
padding-right: 5px !important;
}
.pb-5 {
padding-bottom: 5px !important;
}
.pl-5 {
padding-left: 5px !important;
}
.m-10 {
margin: 10px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.ml-10 {
margin-left: 10px !important;
}
.p-10 {
padding: 10px !important;
}
.pt-10 {
padding-top: 10px !important;
}
.pr-10 {
padding-right: 10px !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pl-10 {
padding-left: 10px !important;
}
.m-15 {
margin: 15px !important;
}
.mt-15 {
margin-top: 15px !important;
}
.mr-15 {
margin-right: 15px !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.ml-15 {
margin-left: 15px !important;
}
.p-15 {
padding: 15px !important;
}
.pt-15 {
padding-top: 15px !important;
}
.pr-15 {
padding-right: 15px !important;
}
.pb-15 {
padding-bottom: 15px !important;
}
.pl-15 {
padding-left: 15px !important;
}
.m-20 {
margin: 20px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mr-20 {
margin-right: 20px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.ml-20 {
margin-left: 20px !important;
}
.p-20 {
padding: 20px !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pr-20 {
padding-right: 20px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pl-20 {
padding-left: 20px !important;
}
.m-25 {
margin: 25px !important;
}
.mt-25 {
margin-top: 25px !important;
}
.mr-25 {
margin-right: 25px !important;
}
.mb-25 {
margin-bottom: 25px !important;
}
.ml-25 {
margin-left: 25px !important;
}
.p-25 {
padding: 25px !important;
}
.pt-25 {
padding-top: 25px !important;
}
.pr-25 {
padding-right: 25px !important;
}
.pb-25 {
padding-bottom: 25px !important;
}
.pl-25 {
padding-left: 25px !important;
}
.m-30 {
margin: 30px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.mr-30 {
margin-right: 30px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.ml-30 {
margin-left: 30px !important;
}
.p-30 {
padding: 30px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.pr-30 {
padding-right: 30px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.pl-30 {
padding-left: 30px !important;
}
.m-35 {
margin: 35px !important;
}
.mt-35 {
margin-top: 35px !important;
}
.mr-35 {
margin-right: 35px !important;
}
.mb-35 {
margin-bottom: 35px !important;
}
.ml-35 {
margin-left: 35px !important;
}
.p-35 {
padding: 35px !important;
}
.pt-35 {
padding-top: 35px !important;
}
.pr-35 {
padding-right: 35px !important;
}
.pb-35 {
padding-bottom: 35px !important;
}
.pl-35 {
padding-left: 35px !important;
}
$property-key: m, mt, mr, mb, ml, p, pt, pr, pb, pl;
$property-val: margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left;
$sizes-list: 0 5 10 15 20 25 30 35;
@each $size in $sizes-list {
$val: $size + 0px;
@each $key in $property-key {
$index: index($property-key, $key);
$property: nth($property-val, $index);
.#{$key}-#{$size} {
#{$property}: $val !important;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment