Generated by SassMeister.com.

SassMeister-input.scss

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

@import "sass-list-maps";
$selector: push;
$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;
}

/* What we can actually get out of libsass*/
@each $modifier in $modifiers {
  .#{$selector} {
    &-#{$modifier} {
     margin-#{$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; }

/* What we can actually get out of libsass*/
.push-left {
  margin-left: 2em; }

.push-right {
  margin-right: 2em; }

.push-top {
  margin-top: 2em; }

.push-bottom {
  margin-bottom: 2em; }