SCSS - Simple Each Array - arrays

Question

i think everyone will understand, what i try to to:
#each $num, $mult, $space in ('01', 1, '16px'), ('02', 2, '32px'), ('03', 3, '48px'), ('04', 4, '64px'), ('05', 5, '80px'), ('06', 6, '96px') {
&.item-#{$num} {
right: $sideNavWidth * $mult + $space;
}
}
but the end result for item-01 is: right: "320px16px"; This is ofc invalid... Why Node-Sass dont give me a clean result? What is wrong with my array?
Its Same like:
&.item-01 {
right: $sideNavWidth + 16px;
}
&.item-02 {
right: $sideNavWidth * 2 + 32px;
}
&.item-03 {
right: $sideNavWidth * 3 + 48px;
}
&.item-04 {
right: $sideNavWidth * 4 + 64px;
}
&.item-05 {
right: $sideNavWidth * 5 + 80px;
}
&.item-06 {
right: $sideNavWidth * 6 + 96px;
}
And end Result must be:
.item-01{right:336px}
.item-02{right:672px}
.item-03{right:1008px}
.item-04{right:1344px}
.item-05{right:1680px}
.item-06{right:2016px}
And anyone see a smarter way to do that, what i try to do?
Best regards.

Answer 1

Remove the quotes from the pixel values in your array.
Like this:
$sideNavWidth: 320px;
.e {
#each $num, $mult, $space in ('01', 1, 16px), ('02', 2, 32px), ('03', 3, 48px), ('04', 4, 64px), ('05', 5, 80px), ('06', 6, 96px) {
&.item-#{$num} {
right: $sideNavWidth * $mult + $space;
}
}
}
In the comments you asked for a more efficient way to do this, so I came up with this:
$sideNavWidth: 320px;
.n {
#for $i from 1 through 6 {
$z: '';
#if ($i < 10) { $z: '0'; }
&.item-#{$z}#{$i} {
right: ($sideNavWidth * $i) + (($i * 2) * 8);
}
}
}