Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@mixin am($attribute, $value: null) {

  @if($value != null) {
    $value: "~=\"#{$value}\"";
  }

  [am-#{$attribute}#{$value}] {
    @content
  }

}

@include am(Button) {
  display: inline-block;
}

@include am(Button, positive) {
  background-color: green;
}

@include am(Masthead, banner) {
  min-height: 480px;

  @include am(Site-nav) {
    width: 100%;
  }

}

SassMeister-output.css

[am-Button] {
  display: inline-block;
}

[am-Button~="positive"] {
  background-color: green;
}

[am-Masthead~="banner"] {
  min-height: 480px;
}
[am-Masthead~="banner"] [am-Site-nav] {
  width: 100%;
}