CODEWITHSUNDEEP
csssass
Microcipcip
Microcipcip

Reputation: 685

How to access a nested multidimensional list on each loop

I am trying to figure out how to declare and access the nested list on a each loop with SASS. I guess using a second level loop inside the first one?

Here's my sample code:

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

Desired output of the first set:

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

Upvotes: 3

Views: 7162

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Yes, you would need an extra loop, but you'll also need to group your lists together differently. The way you have it, your inner list has 4 items in it with the first item being a space delimited list of 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;
        }
      }
    }
}

Upvotes: 7

Related Questions