Iterate variables in SCSS?

Question

I'm writing a function to fade items in, in sequence...

.sequenced-images li:nth-child(2) {
  animation-delay: 1s;
}
.sequenced-images li:nth-child(3) {
  animation-delay: 2s;
}
.sequenced-images li:nth-child(4) {
  animation-delay: 3s;
}
.sequenced-images li:nth-child(5) {
  animation-delay: 4s;
}

I have a lot of items and I don't want to have to manually keep adding a class for the next item.

Can I iterate over the same rule using something like...

.sequenced-images li:nth-child(i++) {
  animation-delay: i++s;
}

?

Take a look here: http://thesassway.com/intermediate/if-for-each-while#for — Ferrmolina, Aug 13 '18 at 14:31

juzraai · Accepted Answer · 2018-08-13T14:37:08.723

6

Yes, you can use for loop and string interpolation:

@for $i from 2 through 5 {
  .sequenced-images li:nth-child(#{$i}) {
    animation-delay: '#{$i - 1}s';
  }
}

This will result in:

.sequenced-images li:nth-child(2) {
  animation-delay: "1s";
}

.sequenced-images li:nth-child(3) {
  animation-delay: "2s";
}

.sequenced-images li:nth-child(4) {
  animation-delay: "3s";
}

.sequenced-images li:nth-child(5) {
  animation-delay: "4s";
}

edited Aug 13 '18 at 14:37

answered Aug 13 '18 at 14:29

juzraai

5,693
8
33
47

Great, thanks! Does that mean everytime an Item is added I need to update the "2 through 5" or can I use a wildcard so I can add as amny items as I like? – Liam Aug 13 '18 at 14:33
You're welcome! :) You have to update number in the loop header, I can't think of a wildcard solution. – juzraai Aug 13 '18 at 14:35

Iterate variables in SCSS?

1 Answers1