title: SCSS Undefined variable error when using Gulp
body: <p>I am using gulp-sass to compile SCSS, but received the following error message:</p>
  <pre><code>[19:51:38] 'sassTask' errored after 98 ms
  [19:51:38] Error in plugin 'gulp-sass'   
  Message:
      assets\scss\base\_typography.scss    
  Error: Undefined variable: &quot;$color-grey-dark&quot;.
      on line 6 of assets/scss/base/_typography.scss
      from line 7 of assets/scss/main.scss
  &gt;&gt;     color: $color-grey-dark;
  </code></pre>
  <p>Here are my variables from scss/abstracts/_variables.scss</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$color-primary: #55c57a;
  $color-primary-light: #7ed56f;
  $color-primary-dark: #28b485;
  
  $color-grey-dark: #777;
  $color-white: #fff;
  $color-black: #000;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's where I used the $color-grey-dark in scss/base/_typography.scss which generated the error message:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: "Lato", sans-serif;
      font-weight: 400;
      /* font-size: 16px; */
      line-height: 1.7;
      color: $color-grey-dark;
      padding: 3rem;
      box-sizing: border-box;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>and here is my code from assets/scss/main.scss:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import "abstracts/variables";
  @import "abstracts/functions";
  @import "abstracts/mixins";
  
  @import "base/animations";
  @import "base/base";
  @import "base/typography";
  @import "base/utilities";
  
  @import "components/button";
  
  @import "layout/header";
  
  @import "pages/home";</code></pre>
  </div>
  </div>
  </p>
  <p>I did put variables at the top of the list, since I read that the wrong order of your imports can create problems, but that didn't fix it.</p>
  <p>How can I fix this error? Here is a link to the repo of the project in case that's helpful: <a href="https://github.com/chris-fretz/natours-project" rel="nofollow noreferrer">https://github.com/chris-fretz/natours-project</a>.</p>