Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

$gel-type-settings: (
  'canon': (
      'group-a': (
        'font-size': 28px,
        'line-height': 32px,
        '-bold': (
          'font-weight': bold,
          'letter-spacing': -1px
        )
      ),
      'group-b': (
        'font-size': 32px,
        'line-height': 36px
      ),
      'group-c': (
        'font-size': 48px,
        'line-height': 56px
      ),
      'group-d': (
        'font-size': 40px,
        'line-height': 48px
      )
  ),
  'canon-bold': (
    'group-a': (
        'font-weight': bold,
        'letter-spacing': -1px
      )
    )
  )
  'trafalgar': (
      'group-a': (
        'font-size': 20px,
        'line-height': 24px,
        '-bold': (
            'font-weight': bold,
            'letter-spacing': -1px
        )
      ),
      'group-b': (
        'font-size': 24px,
        'line-height': 28px
      ),
      'group-c': (
        'font-size': 36px,
        'line-height': 40px
      ),
      'group-d': (
        'font-size': 32px,
        'line-height': 32px
      )
  )
);
  
  
  
@function gel-get-values($type-class, $type-group: false) {
  $type-settings: map-get($gel-type-settings,$type-class);
  
  @if $type-group == false {
    @return $type-settings;
  }
  
  @return map-get($type-settings, $type-group);  
}

@mixin gel-typography($type-class, $type-group: false) {
  $type-is-bold: false;
  
  @if str-index($type-class, '-bold') != null {
    $type-class: str-replace($type-class, '-bold', '');
    $type-is-bold: true;
  }
  
  $type-values: gel-get-values($type-class, $type-group);
  
  @if $type-group != false {
    @include gel-output-type-values($type-values, $type-is-bold);
  }
}

@mixin gel-output-type-values($type-values, $type-is-bold: false) {
  @each $property, $value in $type-values {
    @if ($type-is-bold and type-of($value) == map) {
      @include gel-output-type-values($value);
    } 
    
    @if (type-of($value) != map) {
      #{$property}: $value;
    }
  }
  
  
}

.foo {
  @include gel-typography('canon', 'group-a');
}

.foo--bold {
  @include gel-typography('canon-bold', 'group-a');
}

SassMeister-output.css

Invalid CSS after "  'trafalgar'": expected selector or at-rule, was ": ("