How can I dinamically change the nth-child() property in SASS?

Question

Good evening,

I'm currently working on a designing project and looking to get something like this : Menu

To do so I used this code in SASS :

&:nth-child(1){
  left: 10px;
}
&:nth-child(2){
  left: 15px;
}
&:nth-child(3){
  left: 30px;
}
&:nth-child(4){
  left: 35px;
}
&:nth-child(5){
  left: 50px;
}
&:nth-child(6){
  left: 55px;
}
&:nth-child(7){
  left: 70px;
}
&:nth-child(8){
  left: 75px;
}
&:nth-child(9){
  left: 50px;
}
&:nth-child(10){
  left: 55px;
}
&:nth-child(11){
  left: 30px;
}
&:nth-child(12){
  left: 35px;
}
&:nth-child(13){
  left: 10px;
}
&:nth-child(14){
  left: 15px;
}

Right now, it is hard-coded, and the layout is not the same if the numbers of elements from the list is different.

So I'd like to do this dynamically, how can I do so?

I thank you in advance for your help,

Alex

Answer 1

Few exemple that might help you going:

How to create a simple loop with pattern

@for $i from 1 through 20 {
  li:nth-child(#{$i}) {
    left: 25px + $i * 10px; // could be anything, you need to find the pattern
  }
}

Compiles to:

li:nth-child(1) {
  left: 35px;
}

li:nth-child(2) {
  left: 45px;
}

li:nth-child(3) {
  left: 55px;
}

li:nth-child(4) {
  left: 65px;
}

li:nth-child(5) {
  left: 75px;
}

li:nth-child(6) {
  left: 85px;
}

li:nth-child(7) {
  left: 95px;
}

li:nth-child(8) {
  left: 105px;
}

li:nth-child(9) {
  left: 115px;
}

li:nth-child(10) {
  left: 125px;
}

li:nth-child(11) {
  left: 135px;
}

li:nth-child(12) {
  left: 145px;
}

li:nth-child(13) {
  left: 155px;
}

li:nth-child(14) {
  left: 165px;
}

li:nth-child(15) {
  left: 175px;
}

li:nth-child(16) {
  left: 185px;
}

li:nth-child(17) {
  left: 195px;
}

li:nth-child(18) {
  left: 205px;
}

li:nth-child(19) {
  left: 215px;
}

li:nth-child(20) {
  left: 225px;
}

How to create a loop whith a more complex pattern

@for $i from 1 through 20 {
    @if ($i < 11) {
      li:nth-child(#{$i}) {
        left: 25px + $i * 10px; // could be anything
      }
    }
    @else {
      li:nth-child(#{$i}) {
        left: (25px + (10 * 10px)) - ((11 - $i) * -1) * 10px; // could be anything
      } 
    }
}

Compiles to:

li:nth-child(1) {
  left: 35px;
}

li:nth-child(2) {
  left: 45px;
}

li:nth-child(3) {
  left: 55px;
}

li:nth-child(4) {
  left: 65px;
}

li:nth-child(5) {
  left: 75px;
}

li:nth-child(6) {
  left: 85px;
}

li:nth-child(7) {
  left: 95px;
}

li:nth-child(8) {
  left: 105px;
}

li:nth-child(9) {
  left: 115px;
}

li:nth-child(10) {
  left: 125px;
}

li:nth-child(11) {
  left: 125px;
}

li:nth-child(12) {
  left: 115px;
}

li:nth-child(13) {
  left: 105px;
}

li:nth-child(14) {
  left: 95px;
}

li:nth-child(15) {
  left: 85px;
}

li:nth-child(16) {
  left: 75px;
}

li:nth-child(17) {
  left: 65px;
}

li:nth-child(18) {
  left: 55px;
}

li:nth-child(19) {
  left: 45px;
}

li:nth-child(20) {
  left: 35px;
}

How to create a loop from a list of values

$fooList : 10px, 20px, 30px, 0px, 200px, 80px, -10px;
@for $i from 1 through length($fooList) {
    li:nth-child(#{$i}) {
        left: nth($fooList, $i);
    }
}

Compiles to:

li:nth-child(1) {
  left: 10px;
}

li:nth-child(2) {
  left: 20px;
}

li:nth-child(3) {
  left: 30px;
}

li:nth-child(4) {
  left: 0px;
}

li:nth-child(5) {
  left: 200px;
}

li:nth-child(6) {
  left: 80px;
}

li:nth-child(7) {
  left: -10px;
}