sass 缓存值 http://www.sitepoint.com/caching-values-sass-mixins/

sass1

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

// Map storing values when the mixin is being called
$cache: (
  width  : (),
  height : (),
);

// A mixin defining both the width and the height
// ---
// The main problem with a regular "size" mixin is it doesn't try to 
// merge selectors when there is either the width or the height
// repeated from one call to the other
// ---
// So here is an over-engineered version which use placeholders
// to group selectors when a width or height has already been used
// ---
// @param: [number] $width: width
// @param: [number] $height ($width): height
// ---
@mixin size($width, $height: $width) {
  
  // If the width has not been cached yet
  $stored-widths: map-get($cache, 'width');
  @if not index($stored-widths, $width) {
    // Cache the value
    $cache: map-merge($cache, ('width': append($stored-widths, $width)));
    // And create a placeholder at root
    @at-root %width-#{length($stored-widths) + 1} {
      width: $width;
    }
  }
  
  // If the height has not been cached yet
  $stored-heights: map-get($cache, 'height');
  @if not index($stored-heights, $height) {
    // Cache the value
    $cache: map-merge($cache, ('height': append($stored-heights, $height)));
    // And create a placeholder at root
    @at-root %height-#{length($stored-heights) + 1} {
      height: $height;
    }
  }
  
  // Extend the placeholders
  @extend %width-#{index(map-get($cache, 'width'), $width)};
  @extend %height-#{index(map-get($cache, 'height'), $height)}; 
}

.a {
  @include size(100%, 5em);
}

.b {
  @include size(100%, 1px);
}

.c {
  @include size(1px, 5em);
}

.d {
  @include size(1px, 5em);
}

//编译结果
.a, .b {
  width: 100%;
}
.a, .c, .d {
  height: 5em;
}

.b {
  height: 1px;
}

.c, .d {
  width: 1px;
}