Skip to content

Instantly share code, notes, and snippets.

@chrisgreeff
Forked from darren131/_spacing.scss
Last active December 22, 2015 10:19
Show Gist options
  • Save chrisgreeff/6457617 to your computer and use it in GitHub Desktop.
Save chrisgreeff/6457617 to your computer and use it in GitHub Desktop.
Have extended Darren Woods (@darren) spacing mixin to include an 'all' placeholder selector.
// This is based on Nicole Sullivan's OOCSS spacing module
// with a slight modification, namely:
//
// 1. there's no vertical or horizontal
//
// Produces the following placeholder selectors
// %mtn {
// margin-top: 0;
// }
// %mbn {
// margin-bottom: 0;
// }
// %man {
// margin: 0;
// }
// etc
//
// To use simple include it in your main style.scss file
// and use the @extend directive to include in your styles
//
// Thanks to @_tim for the help with this!
$spacing_types: (m margin) (p padding);
$position_values: (t top) (b bottom) (l left) (r right) a;
$spacing_values: (n 0) (s 10px) (m 20px) (l 40px);
@each $spacing_type in $spacing_types {
@each $position_value in $position_values {
@each $spacing_value in $spacing_values {
@if $position_value == a {
%#{nth($spacing_type, 1) + nth($position_value, 1) + nth($spacing_value, 1)} {
#{nth($spacing_type, 2)}: #{nth($spacing_value,2)};
}
} @else {
%#{nth($spacing_type, 1) + nth($position_value, 1) + nth($spacing_value, 1)} {
#{nth($spacing_type, 2)}-#{nth($position_value, 2)}: #{nth($spacing_value,2)};
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment