Vaadin Sass bug?

/* Define your theme modifications inside next mixin */
@mixin com_dtc_callbook-halo-ext {
  $background-colors: #ff0000, #00ff00, #0000ff, #ffff00, #ff5f00, #00c9ff;
  $text-colors: #000000, #000000, #000000, #000000, #000000, #000000;

  @for $i from 1 through 6 {
    .v-select-optiongroup.event-type-label:nth-child(#{$i}) {
      background-color: nth($background-colors, $i);
      color: nth($text-colors, $i);
    }
  }
}

This halo-ext.scss file doesn’t compile saying

[CubaWebScssThemeCreation] Error on SCSS traverse
com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file com.dtc.callbook/halo-ext
Encountered ")" at line 7, column 59.
Was expecting one of:
"}"

However if we paste this into

adding @include com_dtc_callbook-halo-ext() in the end, we’ll get

.v-select-optiongroup.event-type-label:nth-child(1) {
  background-color: red;
  color: black;
}

.v-select-optiongroup.event-type-label:nth-child(2) {
  background-color: lime;
  color: black;
}

and so on… Is this vaadin bug? How can I workaround it?
The interesting thing is that if we look at this forum’s syntax highlighter we’ll see exactly same (bug?) The #{$i}) { is treated incorrectly after label:nth-child( Am I wrong with the syntax?

Hello @rulesprog

It seems that the problem is related to Vaadin SASS Compiler issue: GitHub.

Unfortunately there is no suitable workaround, because the problem is related to string interpolation.

Well Then Vaadin SASS couldn’t handle the main thing I needed from it( . Ok, I’ll copy compiled CSS from online SASS compiler and paste the CSS into SASS file or generate CSS by-hand using JavaScript or whatever language.