title: @import in @if statement in Sass
body: <p>I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css.</p>
  
  <p>I have the following files:</p>
  
  <pre><code>minifiedcssforloginpage.scss
  grouped-pages.scss
  </code></pre>
  
  <p>In minifiedcssforloginpage.scss I declare $load-complete-css:false. Afterwards I import myproject.scss which contains all the imports of my modules, layouts, core... In myproject.scss i want to do something like</p>
  
  <pre><code>@if $load-complete-css {
       @import module1;
       @import module2;
       @import module3;
  }
  </code></pre>
  
  <p>So minifiedcssforloginpage.scss would generate minifiedcssforloginpage.css with less css then grouped-pages.css (that has a var $load-complete-css set to true).</p>
  
  <p>But I get an error that this is not possible "Import directives may not be used within control directives or mixins".</p>