Are nested for loops supported in Slim templates?

Question

The following code fails to process from Slim to HTML:

- for container in (1..3)
  .spinner-container.container#{container}
    - for circle in (1..4)
      .circle#{circle}

The Grunt task returns the following error.

Warning: Slim::Parser::SyntaxError: Text line not indented deep enough.
The first text line defines the necessary text indentation.
Are you trying to nest a child tag in a tag containing text? Use | for the text block!
  (__TEMPLATE__), Line 63, Column 4
    - for circle in (1..4)
    ^
  Use --trace for backtrace. Use --force to continue.

Aborted due to warnings.

When I un-nest the for loops the code processes fine:

- for container in (1..3)
  .spinner-container.container#{container}
- for circle in (1..4)
  .circle#{circle}

This works too:

- for container in (1..3)
  .spinner-container.container#{container}
  - for circle in (1..4)
    .circle#{circle}

But neither of these nest the html structure the way I need it.

The final output should be:

.spinner-container.container1
  .circle1
  .circle2
  .circle3
  .circle4
.spinner-container.container2
  .circle1
  .circle2
  .circle3
  .circle4
.spinner-container.container3
  .circle1
  .circle2
  .circle3
  .circle4

Answer 1

Do this:

- for container in (1..3)
  div class="spinner-container container#{ container }"
    - for circle in (1..4)
      div class="circle#{ circle }"