Generated by SassMeister.com.

Loop over map

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

/*------------------------------------*\
    LOOKBOOK SUB LANDING

    Styling here for sub landing page

\*------------------------------------*/


.lookbook-row {
    @extend %clearfix;

    // temp
    & > div {
        background-color: grey;
    }
}

.lookbook-item {
    float: left;

    @include breakpoint(midMediumDown) {
        width: 100%;
    }
    & > div {
        float: left;
        border: 1px solid white;
        border-bottom: none;
        height: 0;
        position: relative;
        width: 100%;
    }
}
$lookbook-rows-width: 1800px;

$lookbook-rows: (
    lookbook-row1-item-widths: (
        height: 420px,
        1: 600px,
        2: 430px,
        3: 340px,
        4: 430px
    ),
    lookbook-row2-item-widths: (
        height: 515px,
        1: 740px,
        2: 630px,
        3: 430px
    ),
    lookbook-row3-item-widths: (
        height: 746px,
        1: 740px,
        2: 630px,
        3: 430px,
        4: 430px
    )
);


@function sum($args...) {
    $sum: 0;

    @each $arg in $args {
        $sum: $sum + $arg;
    }

    @return $sum;
}

$colourList: (
  id-1: (
          color1: #bbb,
          color2: #ccc
  ),
  id-2: (
          color1: #ddd,
          color2: #eee
  )
);

@each $item, $color in $colourList {
    [data-section-id="#{$item}"] {
        border-top: map-get($color, color1);
        border-bottom: map-get($color, color2);
    }
}

@each $item, $key in $lookbook-rows {

    @each $item, $keys in $key {
        .lookbook-row-#{$item} {
            width: (map-get($key, 1) / $lookbook-rows-width) * 100%;
            @debug $key
        }
    }
}

//@each $key, $value in $lookbook-row1-item-widths {
//    .lookbook-row1-#{$key} {
//        width: ($value / $lookbook-row-width) * 100%;
//        @if sum(map-values($lookbook-row1-item-widths)...) == $lookbook-row-width {
//        width: ($value / $lookbook-row-width) * 100%;
//        } @else {
//            @warn "Please check total widths of your row items";
//            @debug sum(map-keys($lookbook-row1-item-widths)...)
//        }
//    }

//    .lookbook-row1-#{$key}-inner {
//        padding-bottom: ($lookbook-row1-height/$value) * 100%;
//    }
//}

//@each $key, $value in $lookbook-row2-item-widths {
//    .lookbook-row2-#{$key} {
//        width: ($value / $lookbook-row-width) * 100%;
//    }
//
//    .lookbook-row2-#{$key}-inner {
//        padding-bottom: ($lookbook-row2-height/$value) * 100%;
//    }
//}
//
//@each $key, $value in $lookbook-row3-item-widths {
//    .lookbook-row3-#{$key} {
//        width: ($value / $lookbook-row-width) * 100%;
//    }
//
//    .lookbook-row3-#{$key}-inner {
//        @if $key >= 3 {
//            padding-bottom: (($lookbook-row3-height/2)/$value) * 100%;
//        } @else {
//            padding-bottom: ($lookbook-row3-height/$value) * 100%;
//        }
//    }
//}

SassMeister-output.css

Undefined mixin 'breakpoint'.