Skip to content

Instantly share code, notes, and snippets.

@kulerbox
Last active August 29, 2015 14:15
Show Gist options
  • Save kulerbox/1fcf3bd1cf28dad782e2 to your computer and use it in GitHub Desktop.
Save kulerbox/1fcf3bd1cf28dad782e2 to your computer and use it in GitHub Desktop.
OOCSS-Sass function for margin and padding helper classes
//margin helpers
@for $i from 1 through 50 {
//all margins
.m--#{$i} {
margin: #{$i}px;
}
//top margins
.mt--#{$i} {
margin-top: #{$i}px;
}
//right margins
.mr--#{$i} {
margin-right: #{$i}px;
}
//bottom margins
.mb--#{$i} {
margin-bottom: #{$i}px;
}
//left margins
.ml--#{$i} {
margin-left: #{$i}px;
}
//neg margins
//all margins
.m--#{$i}--neg {
margin: -#{$i}px;
}
//top margins
.mt--#{$i}--neg {
margin-top: -#{$i}px;
}
//right margins
.mr--#{$i}--neg {
margin-right: -#{$i}px;
}
//bottom margins
.mb--#{$i}--neg {
margin-bottom: -#{$i}px;
}
//left margins
.ml--#{$i}--neg {
margin-left: -#{$i}px;
}
}
//padding helpers
@for $i from 0 through 50 {
//all padding
.p--#{$i} {
padding: #{$i}px;
}
//top padding
.pt--#{$i} {
padding-top: #{$i}px;
}
//right padding
.pr--#{$i} {
padding-right: #{$i}px;
}
//bottom padding
.pb--#{$i} {
padding-bottom: #{$i}px;
}
//left padding
.pl--#{$i} {
padding-left: #{$i}px;
}
//neg padding
//all padding
.p--#{$i}--neg {
padding: -#{$i}px;
}
//top padding
.pt--#{$i}--neg {
padding-top: -#{$i}px;
}
//right padding
.pr--#{$i}--neg {
padding-right: -#{$i}px;
}
//bottom padding
.pb--#{$i}--neg {
padding-bottom: -#{$i}px;
}
//left padding
.pl--#{$i}--neg {
padding-left: -#{$i}px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment