File-scoped variables in SASS

theme-blue.scss

// A single mixin per file allows file-scoped variables
@mixin theme-blue {
  // File-scoped variables
  $main-bg: white;
  $main-fg: #333;
  $accent-bg: #00B4EF;
  $accent-fg: white;

  $content-width: 700px;
  $gutter-width: 1rem;

  body {
    background: $main-bg;
    color: $main-fg;
  }

  .page-header,
  .main-content {
    max-width: $content-width;
    margin: 0 auto;
  }

  .page-header {
    padding-top: 2em $gutter-width;
    background: $accent-color;
    color: $accent-fg;
  }
}

// Mixin the rules for this file
@include theme-blue;