Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Using Sass 3.3 maps as a way to change
// the output of mixins.



// Loop through a map to write styles
@mixin map-styles($map) {
  // Find properties and values in map
  @each $p, $v in $map {
    // Write property: value;
    #{$p}: $v;
  }
}

$default-styles:(
  width: 50%,
  color: white,
) !default;

@mixin foo($color, $styles: $default-styles) {
  background-color: $color;
  @include map-styles($styles);
}



// The user can change the output styles on the fly
// without having to re-engineer the original mixin.

$default-styles:(
  width: 200px,
  color: purple,
);

foo {
  @include foo(red);
}

SassMeister-output.css

foo{background-color:red;width:200px;color:purple}