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

SASS访问每个循环上的嵌套多维列表

1 个答案: