antyakushev/postcss-for

support for nested loops?

Closed this issue · 2 comments

ksmth commented

with the following input:

@for $width from 1 to 8 {
  @for $height from 1 to 8 {
    .GridCell--$(width)x$(height) {
      width: calc($width * 12.5)%;
    }
    .GridCell--$(width)x$(height) {
      padding-top : calc($height / $width * 100)%;
    }
  }
}

I get the following output:

@for $height from 1 to 8 {

  .GridCell--1x$(height) {
    width: calc(1 * 12.5)%;
  }

  .GridCell--1x$(height) {
    padding-top: calc($height / 1 * 100)%;
  }
}

@for $height from 1 to 8 {

  .GridCell--2x$(height) {
    width: calc(2 * 12.5)%;
  }

  .GridCell--2x$(height) {
    padding-top: calc($height / 2 * 100)%;
  }
}

@for $height from 1 to 8 {

  .GridCell--3x$(height) {
    width: calc(3 * 12.5)%;
  }

  .GridCell--3x$(height) {
    padding-top: calc($height / 3 * 100)%;
  }
}
...

I don't think this is the intended behaviour?

@ksmth Thanks! This should work now.

ksmth commented

Awesome, thank you!