Generated by SassMeister.com.

SassMeister-input.scss

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

// vars
$darkBlue: #002c42;
$lightBlue: #1160a5;

// Essentially a function
@mixin colorBg($color: red) {
  @if $color {
    background: $color;
  }
}

// Both classes are out in css
.foo { color: blue; }
.bar { @extend .foo; }

// Only .bar is output in css but our extend still applies
%foo { color: blue; }
.bar { @extend %foo; }

.button {
  background: white;
  color: black;
}

.nav__list {
  // Pass a color to our mixin
  @include colorBg($darkBlue);
  &--button {
    @extend .button;
    &:hover {
      background: $lightBlue;
    }
    // Large version of the button.
    &--large {
      // We want to inherit the hover styles here
      @extend .nav__list--button;
      padding: 20px;
    }
  }
}

SassMeister-output.css

.foo, .bar {
  color: blue;
}

.bar {
  color: blue;
}

.button, .nav__list--button, .nav__list--button--large {
  background: white;
  color: black;
}

.nav__list {
  background: #002c42;
}
.nav__list--button:hover, .nav__list--button--large:hover {
  background: #1160a5;
}
.nav__list--button--large {
  padding: 20px;
}