Доступ SASS к вложенному многомерному списку в каждом цикле

Я пытаюсь понять, как объявить и получить доступ к вложенному списку в каждом цикле с помощью 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;
}

css sass css-preprocessor
person Microcipcip    schedule 28.08.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Да, вам понадобится дополнительный цикл, но вам также потребуется по-другому сгруппировать списки. Как у вас есть, ваш внутренний список содержит 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;
        }
      }
    }
}
person cimmanon    schedule 29.08.2014