Generated by SassMeister.com.

SassMeister-input.scss

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

// AMCSS setup
$amcss-prefix: am-;

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

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

  [#{$amcss-prefix}#{$amcss-attribute}#{$amcss-value}] {
    @content
  }

}

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

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


/**
 * Site nav
 */
@include am(Site-nav) {
  float: left;
}

@include am(Site-nav-item) {
  padding-left: 20px;

  &:first-child {
    padding-left: 0;
  }

}

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

  & > {

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

  }

}

SassMeister-output.css

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

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

/**
 * Site nav
 */
[am-Site-nav] {
  float: left;
}

[am-Site-nav-item] {
  padding-left: 20px;
}
[am-Site-nav-item]:first-child {
  padding-left: 0;
}

/**
 * Mastheads
 */
[am-Masthead~="banner"] {
  min-height: 480px;
}
[am-Masthead~="banner"] > [am-Site-nav] {
  float: none;
  width: 100%;
}