Generated by SassMeister.com.

browserslist

> 0,01%
last 5 versions

SassMeister-input.scss

// ----
// Sass (v4.0.0.alpha.1)
// Compass (vundefined)
// ----

// Var definition no Geral
$props:();

$props: map-merge($props, (main-menu__menu-home__span--props: (
  color: blue,
  background:  #CCC
)));

$props: map-merge($props, (main-menu__menu-home__div--props: (
  color: blue,
  background:  #CCC
)));


// Var definition no Cliente
$props: map-merge($props, (main-menu__menu-home__div--props: (
  color: red,
  border-radius: 4px
)));


@mixin extend-props($elem) {
  $elem-props: map-get($props, $elem);
  @each $key, $value in $elem-props {
    #{$key}: $value;
  }
}

.main-menu {
  &__menu-home {
    span {
      @include extend-props(main-menu__menu-home__span--props);
    }
    div {
      // Variavel sobrescrita no arquivo de variaveis do cliente
      @include extend-props(main-menu__menu-home__div--props);
    }
    p {
      // Variável inexistente, não deve quebrar o css
      @include extend-props(main-menu__menu-home__p--props);
    }
  }
}

SassMeister-output.css

.main-menu__menu-home span {
  color: blue;
  background: #CCC;
}
.main-menu__menu-home div {
  color: red;
  border-radius: 4px;
}