ExtJS - Sencha CMD SASS parser and @each
<p>I'd like to generate icons for normal and active states from a SASS map. </p>

<pre><code>$icon-prefix: 'icon-test';

@mixin btn-state($state) {
  .x-btn-#{$state} &amp; {
    @content;
  }
}

$icon-color-schemes: 'white', 'black';
$icon-color-scheme-default: 'black';

$icons: (
        'default' (
                'bookmark': 'icon-bookmark.png',
                'cancel': 'icon-cancel.png',
                'checklist': 'icon-checklist.png',
                'clipboard': 'icon-clipboard.png',
                'comments': 'icon-comments.png',
                'conference': 'icon-conference_background_selected.png',
                'edit': 'icon-pencil_tip.png',
                'add': 'icon-plus.png',
                'copy': 'icon-copy.png',
                'delete': 'icon-delete.png',
                'design': 'icon-design.png',
                'geography': 'icon-geography.png',
                'grid': 'icon-grid_filled.png',
                'group_message': 'icon-group_message.png',
                'help': 'icon-help.png',
                'minus': 'icon-minus.png',
                'password': 'icon-password.png',
                'pin': 'icon-pin.png',
                'plus': 'icon-plus.png',
                'settings': 'icon-settings.png',
                'shutdown': 'icon-shutdown_filled.png',
                'template': 'icon-template.png',
        ),
        'active' (
                'pin': 'icon-pin-filled.png',
        )
);

// color-schemes
@each $scheme in $icon-color-schemes {
  $postfix: '';
  @if $scheme != $icon-color-scheme-default { $postfix: -#{$scheme}; };

  @each $stateName, $stateValue in $icons {
    @each $class, $filename in $stateValue {
      .#{$icon-prefix}-#{$class}#{$postfix} {
        // default state
        @if $stateName == 'default' {
          background-image: url('icon-srg/#{$scheme}/#{$filename}');
        } @else {
          // active state
          @include btn-state(#{$stateName}) { background-image: url('icon-srg/#{$scheme}/#{$filename}'); }
        }
      }
    };
  }
}
</code></pre>

<p>The expected CSS result would be</p>

<pre><code>.icon-test-bookmark-white {
  background-image: url("icon-srg/white/icon-bookmark.png");
}

.icon-test-cancel-white {
  background-image: url("icon-srg/white/icon-cancel.png");
}

...

.icon-test-template {
  background-image: url("icon-srg/black/icon-template.png");
}

.x-btn-active .icon-test-pin {
  background-image: url("icon-srg/black/icon-pin-filled.png");
}
</code></pre>

<p>The <a href="http://www.sassmeister.com/" rel="nofollow">SassMeister</a> parses it as expected, but the Sencha CMD (v6.1.2.15) with <code>sencha app watch</code> parses only something like this:</p>

<pre><code>.x-btn-default bookmark icon-bookmark.png cancel icon-cancel.png checklist icon-checklist.png clipboard icon-clipboard.png comments icon-comments.png conference icon-conference_background_selected.png edit icon-pencil_tip.png add icon-plus.png copy icon-copy.png delete icon-delete.png design icon-design.png geography icon-geography.png grid icon-grid_filled.png group_message icon-group_message.png help icon-help.png minus icon-minus.png password icon-password.png pin icon-pin.png plus icon-plus.png settings icon-settings.png shutdown icon-shutdown_filled.png template icon-template.png .icon-srg-active-white {
    background-image: url("icon-srg/white/pin icon-pin-filled.png");
}
.x-btn-default bookmark icon-bookmark.png cancel icon-cancel.png checklist icon-checklist.png clipboard icon-clipboard.png comments icon-comments.png conference icon-conference_background_selected.png edit icon-pencil_tip.png add icon-plus.png copy icon-copy.png delete icon-delete.png design icon-design.png geography icon-geography.png grid icon-grid_filled.png group_message icon-group_message.png help icon-help.png minus icon-minus.png password icon-password.png pin icon-pin.png plus icon-plus.png settings icon-settings.png shutdown icon-shutdown_filled.png template icon-template.png .icon-srg-active {
    background-image: url("icon-srg/black/pin icon-pin-filled.png");
}
</code></pre>

<p>I know, that the SASS parser of Sencha CMD is not a real SASS parser, but quite much, so it fails with an <code>@each</code> loop?</p>