Skip to content

Instantly share code, notes, and snippets.

@jeffcarp
Last active March 31, 2016 14:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jeffcarp/5809824 to your computer and use it in GitHub Desktop.
Save jeffcarp/5809824 to your computer and use it in GitHub Desktop.
Idea for generating generic classes in Sass
@mixin space($type, $name, $size: 1em) {
$prefix: '';
@if $type == 'padding' { $prefix: 'p'; }
@if $type == 'margin' { $prefix: 'm'; }
.#{$prefix}#{$name} { #{$type}: $size; }
.#{$prefix}#{$name}t { #{$type}-top: $size; }
.#{$prefix}#{$name}l { #{$type}-left: $size; }
.#{$prefix}#{$name}b { #{$type}-bottom: $size; }
.#{$prefix}#{$name}r { #{$type}-right: $size; }
.#{$prefix}#{$name}y { #{$type}-top: $size; #{$type}-bottom: $size; }
.#{$prefix}#{$name}x { #{$type}-left: $size; #{$type}-right: $size; }
.#{$prefix}#{$name}0 { #{$type}: 0; }
}
@include space('padding', 't', 0.6em); // t Tiny
@include space('padding', 's', 0.8em); // s Small
@include space('padding', 'm', 1.0em); // m Medium
@include space('padding', 'l', 1.2em); // l Large
@include space('margin', 't', 0.6em); // t Tiny
@include space('margin', 's', 0.8em); // s Small
@include space('margin', 'm', 1.0em); // m Medium
@include space('margin', 'l', 1.2em); // l Large
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment