SVG List Map

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

// When compiling with Compass (v0.12.6) I get the following error
// error workspace/submoduled-assets/styles/styleguide.scss 
// (Line 2 of workspace/submoduled-assets/styles/modules/_node-homepage-rotator.scss: 
// Invalid CSS after "    template1": expected ")", was ": (svg: "vertic...")
$homepageShapes: (
    template1: (svg: "verticies.svg", top: 200px, left: 150px),
    template2: (svg: "full.svg", top: 200px, left: 30px),
    template3: (svg: "swipe_medium_right.svg", top: 200px, left: 500px),
    template4: (svg: "swipe_medium_left.svg", top: 165px, left: 150px),
    template5: (svg: "swipe_small_left.svg", top: 200px, left: 500px),
    template6: (svg: "swipe_small_right.svg", top: 165px, left: 150px),
    template7: (svg: "text_only.svg", top: 175px, left: 300px)
);
@mixin homepageSVG($template) {
    $t: map-get($homepageShapes, $template);
    .svg-overlay-homepage {
      background-image: url('../images/shapes/#{map-get($t, svg)}');
    }
    .home-hero-wrap {
      top: map-get($t, top);
      left: map-get($t, left);
      @if $template == template4 or $template == template6 or $template == template7 {
        text-align: left;
      }
    }
}
.node-homepage-rotator {
    $l: length($homepageShapes);
    
    position: relative;
    overflow: hidden;
    
    @for $i from 1 through $l {
      &.homepage-rotator-template-#{$i} {
        @include homepageSVG(template#{$i});
      }
    }
}

SassMeister-output.css

.node-homepage-rotator {
  position: relative;
  overflow: hidden;
}
.node-homepage-rotator.homepage-rotator-template-1 .svg-overlay-homepage {
  background-image: url("../images/shapes/verticies.svg");
}
.node-homepage-rotator.homepage-rotator-template-1 .home-hero-wrap {
  top: 200px;
  left: 150px;
}
.node-homepage-rotator.homepage-rotator-template-2 .svg-overlay-homepage {
  background-image: url("../images/shapes/full.svg");
}
.node-homepage-rotator.homepage-rotator-template-2 .home-hero-wrap {
  top: 200px;
  left: 30px;
}
.node-homepage-rotator.homepage-rotator-template-3 .svg-overlay-homepage {
  background-image: url("../images/shapes/swipe_medium_right.svg");
}
.node-homepage-rotator.homepage-rotator-template-3 .home-hero-wrap {
  top: 200px;
  left: 500px;
}
.node-homepage-rotator.homepage-rotator-template-4 .svg-overlay-homepage {
  background-image: url("../images/shapes/swipe_medium_left.svg");
}
.node-homepage-rotator.homepage-rotator-template-4 .home-hero-wrap {
  top: 165px;
  left: 150px;
  text-align: left;
}
.node-homepage-rotator.homepage-rotator-template-5 .svg-overlay-homepage {
  background-image: url("../images/shapes/swipe_small_left.svg");
}
.node-homepage-rotator.homepage-rotator-template-5 .home-hero-wrap {
  top: 200px;
  left: 500px;
}
.node-homepage-rotator.homepage-rotator-template-6 .svg-overlay-homepage {
  background-image: url("../images/shapes/swipe_small_right.svg");
}
.node-homepage-rotator.homepage-rotator-template-6 .home-hero-wrap {
  top: 165px;
  left: 150px;
  text-align: left;
}
.node-homepage-rotator.homepage-rotator-template-7 .svg-overlay-homepage {
  background-image: url("../images/shapes/text_only.svg");
}
.node-homepage-rotator.homepage-rotator-template-7 .home-hero-wrap {
  top: 175px;
  left: 300px;
  text-align: left;
}