Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass Modifiers Mixin
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan
$colors: (
red: #ff3538,
grey: (
base: #404145,
light: #c7c7cd
),
yellow: (
base: #ecaf2d
),
green: (
base: #5ad864
)
);
$font-sizes: (
small: 12px,
medium: 14px,
large: 16px,
x-large: 18px,
xx-large: 20px
);
@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
@each $key, $value in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
@if type-of($value) == 'map' {
@include modifiers($value, $attribute, $separator);
}
@else {
#{$attribute}: $value;
}
}
}
}
.text {
@include modifiers($colors, 'color', $separator: ':');
@include modifiers($font-sizes, 'font-size', '--');
}
.text-red {
color: #ff3538;
}
.text-grey {
color: #404145;
}
.text-grey:light {
color: #c7c7cd;
}
.text-yellow {
color: #ecaf2d;
}
.text-green {
color: #5ad864;
}
.text--small {
font-size: 12px;
}
.text--medium {
font-size: 14px;
}
.text--large {
font-size: 16px;
}
.text--x-large {
font-size: 18px;
}
.text--xx-large {
font-size: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment