CODEWITHSUNDEEP
cssmathsass
W9914420
W9914420

Reputation: 705

Reverse a list of items in sass using @for loop

This is my @for loop in sass:

@for $i from 1 through 10 {
  #users[data-state='unload'] li:nth-child(#{$i}n) {
    animation-delay: #{$i * 0.1}s;
  }
}

Which generates this css:

#users[data-state=loaded] li:nth-child(1n) {
  animation-delay: 0.1s;
}

#users[data-state=loaded] li:nth-child(2n) {
  animation-delay: 0.2s;
}

#users[data-state=loaded] li:nth-child(3n) {
  animation-delay: 0.3s;
}
/// etc...

what i want to do is have my css read as:

#users[data-state=loaded] li:nth-child(1n) {
  animation-delay: 1s;
}

#users[data-state=loaded] li:nth-child(2n) {
  animation-delay: 0.9s;
}

#users[data-state=loaded] li:nth-child(3n) {
  animation-delay: 0.8s;
}
/// etc....

So I am wondering what is the math calculation needed to reverse the animation delay so that the last child element has the shortlist time and the first child element the longest?

many thanks W9914420

Upvotes: 0

Views: 485

Answers (1)

lakshitha madushan
lakshitha madushan

Reputation: 669

Change animation-delay: #{$i * 0.1}s; as animation-delay: #{(10 - $i) * 0.1}s;

@for $i from 0 through 10 {
  #users[data-state='unload'] li:nth-child(#{$i}n) {
    animation-delay: #{(10 - $i) * 0.1}s;
  }
}

Upvotes: 1

Related Questions