Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

@import "sass-list-maps";
$selectors: (push margin, soft padding);
$modifiers: (left right top bottom);
$space: 2em;

/* In BEM methodology we would want our modifiers to be prefixed with `--`
however, libsass fails to compile anything within an `@each` block that uses
a double hyphen */

/* Expected output */
.push--left {
  margin-left: $space;
}

/* We can hack string interpolation to make this work as expected */
@each $selector in map-keys($selectors) {
  $property: map-get($selectors, $selector);
  
  .#{$selector} {
    @each $modifier in $modifiers {
      $className: "--" + $modifier;
      &#{$className} {
       #{$property}-#{$modifier}: $space;
      }
    }
  }
}

  
// This causes an error
// .#{$selector} {
//   &--#{$modifier} {
//     margin-#{$modifier}: $space;
//   }
// }

// As does this
// .#{$selector}--#{$modifier} {
//   margin-#{$modifier}: $space;
// } 

SassMeister-output.css

/* In BEM methodology we would want our modifiers to be prefixed with `--`
however, libsass fails to compile anything within an `@each` block that uses
a double hyphen */
/* Expected output */
.push--left {
  margin-left: 2em; }

/* We can hack string interpolation to make this work as expected */
.push--left {
  margin-left: 2em; }
.push--right {
  margin-right: 2em; }
.push--top {
  margin-top: 2em; }
.push--bottom {
  margin-bottom: 2em; }

.soft--left {
  padding-left: 2em; }
.soft--right {
  padding-right: 2em; }
.soft--top {
  padding-top: 2em; }
.soft--bottom {
  padding-bottom: 2em; }