title: Dynamic imports for SCSS / Compass?
body: <p>I have a SCSS project that builds on top of Foundation via Compass. It defines a set of sass variables, then defines a bunch of rules in terms of those variables: (my project has many more variable settings and import statements; this is simplified.)</p>
  
  <p><strong>vars.scss</strong>:</p>
  
  <pre><code>$foo = #fafafa
  $bar = 14px;
  
  // rules using $foo and $bar
  @import '_rules';
  </code></pre>
  
  <p>I then use compass to compile <strong>vars.scss</strong>, and everything is great for that set of sass variables. However, I also want the ability to theme my app differently, and generate a different theme by defining a new set of variables which can override the original variables:</p>
  
  <p><strong>vars.scss</strong>:</p>
  
  <pre><code>$foo = #fafafa
  $bar = 14px;
  
  @import 'otherVars';
  
  @import '_rules';
  </code></pre>
  
  <p>I can't edit the file manually when I have 70+ themes. (Having that many themes is necessary for the purposes of my app.) What I really want is to be able to do something like the following:</p>
  
  <p><strong>vars.scss</strong>:</p>
  
  <pre><code>$foo = #fafafa
  $bar = 14px;
  
  @import '{{otherVars}}';
  
  @import '_rules';
  </code></pre>
  
  <p>And then I could call something like:</p>
  
  <pre><code>compass --otherVars themes/theme2
  </code></pre>
  
  <p>It would then be easy to whip out all the themes, because I could call <code>compass</code> once for each theme.</p>
  
  <p>Does SCSS let you do this? I looked into it, and it doesn't look like it.</p>
  
  <p>My current workaround is to split the original <strong>vars.scss</strong> into a prefix and suffix:</p>
  
  <p><strong>_app_prefix.scss</strong>:</p>
  
  <pre><code>$foo = #fafafa
  $bar = 14px;
  </code></pre>
  
  <p><strong>_app_suffix.scss</strong>:</p>
  
  <pre><code>@import '_rules';
  </code></pre>
  
  <p><strong>app.scss</strong>:</p>
  
  <pre><code>@import '_app_prefix';
  // no overrides by default
  @import '_app_suffix';
  </code></pre>
  
  <p>And to override it for a specific theme, you'd make a file that looks like:</p>
  
  <p><strong>theme2.scss</strong>:</p>
  
  <pre><code>@import '_app_prefix';
  
  // only override $foo - let the original value of $bar stand
  $foo = #ebebeb;
  
  @import '_app_suffix';
  </code></pre>
  
  <p>This works, but is sorta painful and introduces additional boilerplate. </p>
  
  <p>My next problem is wanting to have additional <code>@import 'rules_foo'</code> statements, which also need to be constructed dynamically. So my overall fantasy would look like:</p>
  
  <p><strong>vars.scss</strong>:</p>
  
  <pre><code>$foo = #fafafa
  $bar = 14px;
  
  @import '{{otherVars}}';
  
  @import '_rules';
  {{ @import 'additional_rules' for additional_rules in rules }}
  </code></pre>
  
  <p>And I could call:</p>
  
  <pre><code>compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3"
  </code></pre>
  
  <p>(Obviously this is somewhat handwavy but hopefully you get the idea.)</p>
  
  <p>Is there a way to do this? Or am I going to have to resort to handlebars or some other templating language?</p>