-
-
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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