Force SASS to do math

Question

Trying to do math inside my loop.

@for $i from 1 through length($colors) {
  ul li:nth-child(#{$i}) {
    z-index: length($colors) - #{$i};
  }
}

But what I get in CSS, for example, is:

li:nth-child(2) {
    z-index: 8-2;
}

How can I force SASS to do math and get:

li:nth-child(2) {
    z-index: 6;
}

Thanks for help!

score 3 · Accepted Answer · answered Sep 10 '14 at 10:43

3

You are putting the $i value as a string in the z-index property. If you want to calculate the value correctly you should do it:

$length: length($colors)
@for $i from 1 through length($colors) {
  ul li:nth-child(#{$i}) {
    z-index: $length - $i;
  }  
}

Also I recommend you to set a variable with the value of length to prevent multiple calls to this function.

Regards.

answered Sep 10 '14 at 10:43

Mario Araque

That did the trick. Thanks! Set a variable is good idea, but I'm not using server side SASS, so it's not necessary for me. Anyway, good practice, agreed. – pufflik Sep 10 '14 at 13:44

1 Answers1