css - 如何在每个循环中访问嵌套的多维列表

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