CODEWITHSUNDEEP
loopssass
owlyfool
owlyfool

Reputation: 337

How to re-write this using SASS / SCSS loops?

I would like to write the below code block in a more concise sass loop but ran in to issues trying to nest for loops in scss.

here is the code i would like to generate:

/* two items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(2),
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(1) { width: 50%; }

/* three items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(3) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(2) { width: 50%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(1) { width: 25%; }

/* four items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(4) { width: 16.65%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(3) { width: 33%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(2) { width: 33%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(1) { width: 16.65%; }

/* five items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(5) { width: 12.5%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(4) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(3) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(2) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(1) { width: 12.5%; }

/* six items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(6) { width: 10%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(5) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(4) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(3) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(2) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(1) { width: 10%; }

/* seven items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(7) { width: 8.33%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(6) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(5) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(4) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(3) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(2) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(7):nth-last-child(1) { width: 8.33%; }

here is my initial attempt, which is not working: I havent even gotten to the part where i need to make the first and last item half the width of the middle items here.

@for $i from 2 through 7 {
  @for $j from 1 through $i {
    .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) {
      width: percentage(1/$i)
    }
  }
}

any help would be much appreciated.

update - completed code: with thanks to jhpratt for pointing me in the right direction regarding the loop syntax.

@for $i from 2 through 7 {
  /*! #{$i} step wizard spacing */
    @for $j from 1 through $i {
        .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{($i - $j)+1}) {
            @if $j == 1 or $j == $i {
                width: percentage(0.5 / ($i - 1));
            } @else {
                width: percentage(1 / ($i - 1));
            }
        }
    }
}

Upvotes: 1

Views: 56

Answers (1)

jhpratt
jhpratt

Reputation: 7130

Here's what you're looking for

@for $i from 2 through 7 {
    @for $j from 1 through $i - 1 {
        .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) {
            @if $j == 1 or $j == $i - 1 {
                width: percentage(0.5 / ($i - 1));
            } @else {
                width: percentage(1 / ($i - 1));
            }
        }
    }
}

This should be relatively self-explanatory.

Upvotes: 1

Related Questions