Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$color-primary: #ff0;
$color-secondary: #00f;
$color-tertiary: #000;

// Mixin to colorize a property according to user level (set as class on body)
@mixin theme($attr, $tint: "", $amount: "") {

  @if $tint != "" {
    #{$attr}: lighten(#000000, $amount);
  } else {

    #{$attr}: $color-primary;

    .CWN & {
      #{$attr}: $color-secondary;
    }

    .service.aftale & {
      #{$attr}: $color-tertiary;
    }
  }
}


.button-primary {

  @include theme(background);

  &:hover,
  &:active,
  &:focus {
    @include theme(background, lighten, 90%);
  }
}

SassMeister-output.css

.button-primary else {
  background: #ff0;
}
.CWN .button-primary else {
  background: #00f;
}
.service.aftale .button-primary else {
  background: #000;
}
.button-primary:hover, .button-primary:active, .button-primary:focus {
  background: #e6e6e6;
}
.button-primary:hover else, .button-primary:active else, .button-primary:focus else {
  background: #ff0;
}
.CWN .button-primary:hover else, .CWN .button-primary:active else, .CWN .button-primary:focus else {
  background: #00f;
}
.service.aftale .button-primary:hover else, .service.aftale .button-primary:active else, .service.aftale .button-primary:focus else {
  background: #000;
}