derevo
11/23/2015 - 3:11 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

.Element {
  color: tomato;
  border: 10px solid green;
  background: white;
  font-weight: bold;
}
// ----
// libsass (v3.2.5)
// ----

// from http://www.sitepoint.com/extra-map-functions-sass/
/// jQuery-style extend function
/// About `map-merge()`:
/// * only takes 2 arguments
/// * is not recursive
/// @param {Map} $map - first map
/// @param {ArgList} $maps - other maps
/// @param {Bool} $deep - recursive mode
/// @return {Map}
@function map-extend($map, $maps.../*, $deep */) {
  $last: nth($maps, -1);
  $deep: $last == true;
  $max: if($deep, length($maps) - 1, length($maps));

  // Loop through all maps in $maps...
  @for $i from 1 through $max {
    // Store current map
    $current: nth($maps, $i);

    // If not in deep mode, simply merge current map with map
    @if not $deep {
      $map: map-merge($map, $current);
    } @else {
      // If in deep mode, loop through all tuples in current map
      @each $key, $value in $current {

        // If value is a nested map and same key from map is a nested map as well
        @if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" {
          // Recursive extend
          $value: map-extend(map-get($map, $key), $value, true);
        }

        // Merge current tuple with map
        $map: map-merge($map, ($key: $value));
      }
    }
  }

  @return $map;
}

@mixin xy($map: (), $args...) {
  $new: map-extend($map, $args...);
  @each $prop, $val in $new {
    #{$prop}: $val;
  }
}

$some-global-color: tomato;

// this could be added manually or by "editor"
$element-core-custom: (
  font-weight: bold // extend with new property
);
$element-custom: (
  border: 10px solid green // override existing value
);

.Element {
  @include xy((
    color: $some-global-color, // access global values, eg. branding colors
    border: solid 1px black,
    background: white
  ),
  $element-core-custom,
  $element-custom
  );
}