Skip to content

Instantly share code, notes, and snippets.

@netpoe
Created September 17, 2014 17:20
Show Gist options
  • Save netpoe/a1e807e520d9a4637244 to your computer and use it in GitHub Desktop.
Save netpoe/a1e807e520d9a4637244 to your computer and use it in GitHub Desktop.
EBM - Sass rapid-prototyping helper loops
// Multiply the loop variable by this number:
$times: 7;
// Pixel to REMs conversion:
$px-to-rems: true;
// Box Model abbreviations list
$box-model-abbr: p, pt, pr, pb, pl, m, mt, mr, mb, ml;
$box-model-sides: padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom, margin-left;
@for $i from 0 to 11 {
@for $j from 1 to length($box-model-sides) {
.#{nth($box-model-abbr, $j)}-#{$i*$times} {
// For <IE8
#{nth($box-model-sides, $j)}: ($i*$times) + px !important;
// REMs for modern browsers
@if $px-to-rems == true {
#{nth($box-model-sides, $j)}: rem($i*$times) !important;
}
}
@media #{$xs-only} {
.#{nth($box-model-abbr, $j)}-#{$i*$times}-mob {
// For <IE8
#{nth($box-model-sides, $j)}: ($i*$times) + px !important;
// REMs for modern browsers
@if $px-to-rems == true {
#{nth($box-model-sides, $j)}: rem($i*$times) !important;
}
}
}
}
}
/*
p-0, pt-0 ..
*/
.p-7 {
padding: 7px !important;
padding: 0.4375rem !important; }
.pt-7 {
padding-top: 7px !important;
padding-top: 0.4375rem !important; }
.pr-7 {
padding-right: 7px !important;
padding-right: 0.4375rem !important; }
.pb-7 {
padding-bottom: 7px !important;
padding-bottom: 0.4375rem !important; }
.pl-7 {
padding-left: 7px !important;
padding-left: 0.4375rem !important; }
/*And so on...*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment