sass - SCSS - Simple Each Array -

i think understand, try 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 end result item-01 is: right: "320px16px"; ofc invalid... why node-sass dont give me clean result? wrong 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 see smarter way that, try do?

best regards.

remove quotes pixel values in 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 comments asked more efficient way this, came this:

$sidenavwidth: 320px;  .n {   @for $i 1 through 6 {     $z: '';     @if ($i < 10) { $z: '0'; }     &.item-#{$z}#{$i} {       right: ($sidenavwidth * $i) + (($i * 2) * 8);     }   } }