SCSS - 簡單每個陣列

Question

我想每個人都會明白，我嘗試到：

@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; 
    } 
    } 

但對於項目-01的最終結果是：正確的：「320px16px」;這是無效的...爲什麼Node-Sass不給我一個乾淨的結果？我的陣列有什麼問題？

它同樣喜歡：

&.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; 
    } 

而最終的結果一定是：

.item-01{right:336px} 
    .item-02{right:672px} 
    .item-03{right:1008px} 
    .item-04{right:1344px} 
    .item-05{right:1680px} 
    .item-06{right:2016px} 

而且任何人看到一個更聰明的方式做到這一點，我嘗試做？

此致敬禮。

Answer 1

刪除數組中像素值的引號。

像這樣：

$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; 
    } 
    } 
} 

在你問一個更有效的方式來做到這一點的意見，所以我想出了這個：

$sideNavWidth: 320px; 

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