title: SASS mixin with boolean variable: If-Statement not working
body: <p>I'm creating a mixin which styles an <code>$element</code>'s <code>$property</code> to generate page-specific CSS. (Background: There are four pages with different color schemes).</p>
  
  <p><strong>Not working mixin (with if-statement):</strong></p>
  
  <pre><code>@mixin themify($element, $property, $color-light: false) {
      @if $color-light == "true" {
          $pages: home forestGreen, about darkOrange, work dodgerBlue, contact fireBrick;
      }
      @else {
          $pages: home darkGreen, about orange, work royalBlue, contact crimson;
      }
      @each $page in $pages {
          .page--#{nth($page, 1)} .#{$element} {
              #{$property}: nth($page, 2);
          }
      }
  }
  
  /* Call the mixin */
  @include themify(site-nav, background-color, $color-light: true);
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>error/style.scss (Line 47 of css/ui/_misc.scss: Undefined variable "$pages".)
  </code></pre>
  
  <h2>Update</h2>
  
  <p>Adding <code>$pages: "";</code> before the if-statement helps. Why?</p>