title: How do I wrap a file in a mixin to @use in a scss file?
body: <p>Not sure what the best way to import is but '@import' is deprecated and @use should be used instead. I have a grid file that I want to include in style.scss .</p>
  <p>_grid.scss</p>
  <pre class="lang-css prettyprint-override"><code>.main-content {
      display:grid;
      /* Set up grid stuff */
  }
  header{
  grid-area: header;
  }
  </code></pre>
  <p>I need to import into here.
  style.scss</p>
  <pre class="lang-css prettyprint-override"><code>body{
  /* More code here */
  }
  </code></pre>
  <p>The final complied code should look like this:</p>
  <pre class="lang-css prettyprint-override"><code>.main-content {
      display:grid;
      /* Set up grid stuff */
  }
  header{
  grid-area: header;
  }
  body{
  /* More code here */
  }
  </code></pre>
  <p>I know this is wrong, but this is what I have tried:</p>
  <pre class="lang-css prettyprint-override"><code>@use 'grid' as *;
  $main-content
  </code></pre>
  <p>What about using a mixin?</p>
  <p>_grid.scss</p>
  <pre><code>@mixin grid {
  /* Wrap all the code here from _grid.scss */
  
      .main-content {
          display:grid;
          /* Set up grid stuff */
      }
      header{
         grid-area: header;
      }
  
  }
  </code></pre>
  <p>style.css</p>
  <pre class="lang-css prettyprint-override"><code>@use 'grid' as *;
  @include $grid
  
  body{
  }
  </code></pre>