每個迴路上的SASS訪問嵌套多維列表

Question

我想弄清楚如何聲明和訪問與SASS每個循環上的嵌套列表。我想在第一個循環內使用第二級循環？

這裏是我的示例代碼：

$chap1-blocks: (5 
        (1, -70, 30), 
        (2, -130, 80), 
        (3, 10, -30), 
        (4, -90, 50) 
       ), 
       (7 
        (1, -70, 30), 
        (2, -130, 80), 
        (3, 10, -30), 
        (4, -90, 50) 
       ), 
       (10 
        (1, -70, 30), 
        (2, -130, 80), 
        (3, 10, -30), 
        (4, -90, 50) 
       ); 

@each $chap1-block in $chap1-blocks { 
    $section: nth($chap1-block, 1); //5 
    $row:  nth($chap1-block, ??); //1 
    $top:  nth($chap1-block, ??); //-70 
    $bottom: nth($chap1-block, ??); //30 

    .section-#{$section} { 
     .row-#{$row} { 
      margin: #{$top}px 0 #{$bottom}px; 
     } 
    } 
} 

期望中的第一組輸出：

.section-5 .row-1 { 
    margin: -70px 0 30px; 
} 
.section-5 .row-2 { 
    margin: -130px 0 80px; 
} 
.section-5 .row-3 { 
    margin: 10px 0 -30px; 
} 
.section-5 .row-4 { 
    margin: -90px 0 50px; 
} 

Answer 1

是的，你需要一個額外的循環，但你還需要將你的名單一起不同。您擁有它的方式，您的內部列表中有4個項目，第一個項目是空間分隔列表5 (1, -70, 30)。

$chap1-blocks: 
    (5 
    ((1, -70, 30) 
    , (2, -130, 80) 
    , (3, 10, -30) 
    , (4, -90, 50) 
    ) 
    , 7 
    ((1, -70, 30) 
    , (2, -130, 80) 
    , (3, 10, -30) 
    , (4, -90, 50) 
    ) 
    , 10 
    ((1, -70, 30) 
    , (2, -130, 80) 
    , (3, 10, -30) 
    , (4, -90, 50) 
    ) 
); 

@each $chap1-block in $chap1-blocks { 
    $section: nth($chap1-block, 1); //5 
    $rows: nth($chap1-block, 2); 

    .section-#{$section} { 
     @each $x in $rows { 
     $row:  nth($x, 1); //1 
     $top:  nth($x, 2); //-70 
     $bottom: nth($x, 3); //30 
     .row-#{$row} { 
      margin: #{$top}px 0 #{$bottom}px; 
     } 
     } 
    } 
}