Question

Why does the following creates divs without nesting? I want .squares to be within .rows

- for (var i = 1; i <= rows; i++) {
    div(class='row row-'+i)
    - for (var j = 1; j <= cols; j++) {
        .div(class='square square-'+j)
    - }
- }

Answer 1

Just guessing, you might need to indent your second for loop to sit inside the first div

EDIT: This code is working for me as expected, with nested divs

//- set variables for testing only
rows = 3
cols = 2

- for (var i = 1; i <= rows; i++) {
  div(class='row row-'+i)
    //- indent the for loop inside containing div
    - for (var j = 1; j <= cols; j++) {
      .div(class='square square-'+j)
    - }
- }