Jake Wilson Jake Wilson - 1 month ago 7
CSS Question

Substract from SCSS variable value?

I have a SCSS mixin like so:

@for $i from 2 through 4 {
&__layout:nth-child(#{$i}) {
transition: transform 0.4s ease #{$i}s;
}
}


How can I subtract something from
#{$1}s
? For example, this works:

transition: transform 0.4s ease #{$i+1}s; // <-- adds 1 to value as expected


But this gives an error:

transition: transform 0.4s ease #{$i-1}s; // Undefined variable: "$i-1".


So I assume this is because variables can have dashes in them? So how do I escape the minus sign so I can subtract from the variable?

Answer

yes just give the space it works

@for $i from 2 through 4 {
  &__layout:nth-child(#{$i}) {
    transition: transform 0.4s ease #{$i - 1}s;
  }
}

Hope this helps