title: How to fix an Undefined Variable Error in SCSS?
body: <p>I've run into an Undefined Variable Error writing SCSS.</p>
  <ol>
  <li>My file structure is sound (I believe), because it compiles the rest of the files as it should into main.scss.</li>
  <li>I'm using @use instead of @import.</li>
  </ol>
  <p><code>color: #f22437</code> vs <code>color: $clr-primary</code></p>
  <pre><code>Error: Undefined variable.
     ╷
  54 │   color: $clr-primary;
     │          ^^^^^^^^^^^^
     ╵
    scss/layouts/_navigation.scss 54:10  @use
    scss/layouts/_all-layouts.scss 11:1  @use
    scss/main.scss 7:1                   root stylesheet
  </code></pre>
  <p>The files that are in question.</p>
  <p><a href="https://i.stack.imgur.com/hz69G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hz69G.png" alt="Error Image" /></a></p>
  <p><a href="https://i.stack.imgur.com/dBEfm.png" rel="nofollow noreferrer">File Structure</a></p>
  <p><em><strong>UPDATE</strong></em> I changed all @use to @import, and it worked.</p>
  <p>Please me understand why this worked and how I can @use instead of @import. Seems like an issue related to SASS, but I could still be at fault. For now I'll 'hack' it.</p>