Theming with Sass

SassMeister-input-HTML.html

<article class="EventPass theme--ljl">
  <a href="#">test</a>
  
  <p>test</p>
</article>

SassMeister-input.scss

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

//colors
$default-primary: #000;
$default-secondary: #c8c7c7;

$ljl-primary: #e3a536;
$ljl-secondary: #3abce0;

//elements
@mixin color-theme(
        $copy: $default-primary,
        $background: $default-secondary
        ) {
  %theme-copy {
    color: $copy;
  }

  %theme-background {
    background-color: $background;
  }
}

//themes
.EventPass.theme--ljl {
  @include color-theme($copy: $ljl-primary, $background: $ljl-secondary);
}


a {
  @extend %theme-copy;
}

p {
  @extend %theme-background;
}

SassMeister-output.css

.EventPass.theme--ljl a {
  color: #e3a536;
}
.EventPass.theme--ljl p {
  background-color: #3abce0;
}

SassMeister-rendered.html

<article class="EventPass theme--ljl">
  <a href="#">test</a>
  
  <p>test</p>
</article>