Themable SCSS Mixins

How to use SCSS variables and mixins for theming

by Steve Martin

HTML

<div class='page'>
  <p>
    WAAAAT
  </p>
  <div class='page--spinner'>
    <h1>
    SpinnySpin
    </h1>
  </div>
</div>

<div class='page-over'>
  <p>
    WAAAAT
  </p>
  <div class='page-over--spinner'>
    <h1>
    SpinnySpin
    </h1>
  </div>
</div>

SCSS

$defaultBackgroundColor: blue;
$defaultColor: red;

@mixin spinnerComp($backgroundColor: $defaultBackgroundColor, $color: $defaultColor) {
  &--spinner {
    background-color: $backgroundColor;
    color: $color;
  }
}

.page {
  @include spinnerComp();
}

.page-over {
  @include spinnerComp($color: green, $backgroundColor: yellow);
}