Sass Modifiers Mixin

modifiers.scss

// ----
// 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', '--');
}

undefined

.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;
}