Generated by SassMeister.com. http://sassmeister.com/gist/fe10a6622184ba7d358b

SassMeister-input-HTML.html

SCSS Merge "mixin mash-up"
An attempt to reduce CSS output when using multiple
mixins targeting the same properties. As a side effect
you can now override mixin output.


Example without merge:
@mixin a(){ margin-left: 100px; }
@mixin b(){ margin-left: 200px; }
@mixin c(){ margin-left: 300px; }

.foo {
  @include a();
  @include b();
  @include c();
}

// CSS
.foo {
  margin-left: 100px; // from mixin a
  margin-left: 200px; // from mixin b
  margin-left: 300px; // from mixin c
}


Example using merge and render:
@mixin a(){
  @include render($margin-left: 100px)
}
@mixin b(){
  @include render($margin-left: 200px)
}
@mixin c(){
  @include render($margin-left: 300px)
}

.bar {
  @include merge(){
    @include a();
    @include b();
    @include c();
  }
} 

// CSS
.foo {
  margin-left: 300px; // from mixin c
}


Example using override
Example using merge and render:
@mixin a(){
  @include render(
    $margin-left :0, 
    $margin-right:0, 
    $color  : magenta,
    $padding: 50px    
  );
}
@mixin b(){
  @include render($margin-right: -100%);
}

.doh {
  @include merge(){
    @include a();
    @include b();      // overrides margin-right from mixin a
    @include render(
      $float  : left,  // adds float
      $padding: null,  // removes padding from mixin a
      $color  : gold   // changes color from mixin a  
    )
  }
}

.doh {
  margin-left: 0;
  margin-right: -100%;
  color: gold;
  float: left;
}

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

//
// Global variables 
// 1) A map to hold CSS properties and values
// 2) A flag to keep track of minification context
// 
$__merge-map__: (); // 1
$__merge__: false;  // 2


//
// 1) Set the merge flag to envoke the add-to-merge-map in the css mixin    
// 2) Reset the merge map 
// 3) @content is our mixins holding the nested include of the css mixin
//    We need to add @content before printing out the values in merge-map
// 4) Print out the content of merge-map
// 5) Reset the merge flag 
@mixin merge(){
  $__merge__: true !global;  // 1
  $__merge-map__:() !global; // 2   
  @content;                  // 3
  @each $key, $value in $__merge-map__{
    #{$key} : $value;        // 4
  }
  $__merge__: false !global;  // 5 
}


//
// 1) By passing in arguments as named keywords we can create a map using 
//    the keywords function 
// 2) Check if we are in the context of our merge mixin
// 3) If so merge our arguments map with the global merge-map 
//    overwriting existing values
// 4) If not – simply print out the css  
// 
@mixin render($arglist...){
  $map: keywords($arglist); // 1
  @if $__merge__ {         // 2
    $__merge-map__: map-merge($__merge-map__, $map) !global; // 3
  } @else {
    @each $key, $value in $map{
      #{$key} : $value;
    }
  } 
}



// Example without merge:
@mixin a(){ margin-left: 100px; }
@mixin b(){ margin-left: 200px; }
@mixin c(){ margin-left: 300px; }

.foo {
  @include a();
  @include b();
  @include c();
}




//Example using merge and render:
@mixin a(){
  @include render($margin-left: 100px)
}
@mixin b(){
  @include render($margin-left: 200px)
}
@mixin c(){
  @include render($margin-left: 300px)
}

.bar {
  @include merge(){
    @include a();
    @include b();
    @include c();
  }
} 


// Override:
@mixin a(){
  @include render(
    $margin-left :0, 
    $margin-right:0, 
    $color  : magenta,
    $padding: 50px    
  );
}
@mixin b(){
  @include render($margin-right: -100%);
}

.doh {
  @include merge(){
    @include a();
    @include b();
    @include render(
      $float  : left, 
      $padding: null,
      $color  : gold
    )
  }
}


















body { white-space:pre; font:12px monospace;}

SassMeister-output.css

.foo {
  margin-left: 100px;
  margin-left: 200px;
  margin-left: 300px;
}

.bar {
  margin-left: 300px;
}

.doh {
  margin-left: 0;
  margin-right: -100%;
  color: gold;
  float: left;
}

body {
  white-space: pre;
  font: 12px monospace;
}

SassMeister-rendered.html

SCSS Merge "mixin mash-up"
An attempt to reduce CSS output when using multiple
mixins targeting the same properties. As a side effect
you can now override mixin output.


Example without merge:
@mixin a(){ margin-left: 100px; }
@mixin b(){ margin-left: 200px; }
@mixin c(){ margin-left: 300px; }

.foo {
  @include a();
  @include b();
  @include c();
}

// CSS
.foo {
  margin-left: 100px; // from mixin a
  margin-left: 200px; // from mixin b
  margin-left: 300px; // from mixin c
}


Example using merge and render:
@mixin a(){
  @include render($margin-left: 100px)
}
@mixin b(){
  @include render($margin-left: 200px)
}
@mixin c(){
  @include render($margin-left: 300px)
}

.bar {
  @include merge(){
    @include a();
    @include b();
    @include c();
  }
} 

// CSS
.foo {
  margin-left: 300px; // from mixin c
}


Example using override
Example using merge and render:
@mixin a(){
  @include render(
    $margin-left :0, 
    $margin-right:0, 
    $color  : magenta,
    $padding: 50px    
  );
}
@mixin b(){
  @include render($margin-right: -100%);
}

.doh {
  @include merge(){
    @include a();
    @include b();      // overrides margin-right from mixin a
    @include render(
      $float  : left,  // adds float
      $padding: null,  // removes padding from mixin a
      $color  : gold   // changes color from mixin a  
    )
  }
}

.doh {
  margin-left: 0;
  margin-right: -100%;
  color: gold;
  float: left;
}