title: Injecting variables during SASS compilation with Node
body: <p>In an application I'm working, I have to dynamically compile SASS before rendering on the client (caching system is coming, don't worry). Currently I'm using <a href="https://github.com/sass/node-sass">node-sass</a> and everything is working great.</p>
  
  <p>Here is what I'm working on so far. Other project-specific code has been removed for brevity:</p>
  
  <pre><code>var sass            = require('node-sass'),
      autoprefixer    = require('autoprefixer-core'),
      vars            = require('postcss-simple-vars'),
      postcss         = require('postcss'),
  
  function compileCSS() {
      var result = sass.renderSync({
              file: 'path/to/style.scss'
          });
  
      return postcss([autoprefixer]).process(result.css.toString()).css;
  }
  </code></pre>
  
  <p>The wrinkle is that now I need to pass in dynamic data from Node and have that compile like a normal SASS variable. Initially I tried using <a href="https://github.com/postcss/postcss">PostCSS</a>, because I noticed that variable injection was <a href="https://github.com/postcss/postcss-simple-vars#variables">something it could do</a>. Unfortunately, that didn't work. PostCSS kicks in after the compilation phase, which fails miserably by this point.</p>
  
  <p>Next, I tried to use <a href="http://underscorejs.org/#template">underscore</a> templates to try and overwrite using node-sass' <a href="https://github.com/sass/node-sass#importer--v200---experimental"><code>importer()</code></a>:</p>
  
  <pre><code>var result = sass.renderSync({
          file: 'path/to/style.scss',
          importer: function(url, prev, done) {
              var content = fs.readFileSync(partial_path),
                  partial = _.template(content.toString());
  
              return {
                  contents: partial({ test: 'test' })
              };
          }
      });
  </code></pre>
  
  <p>Which resulted in the following error:</p>
  
  <pre><code>Error: error reading values after :
  </code></pre>
  
  <p>Obviously SASS didn't like underscore's variable syntax..</p>
  
  <hr>
  
  <h2>TL;DR</h2>
  
  <p>How can I pass dynamic variables to SASS from within my Node application?</p>
  
  <hr>
  
  <h3>Additional Information</h3>
  
  <ol>
  <li>My team and I are not completely adverse to switching to something like <a href="https://learnboost.github.io/stylus/">Stylus</a>; however, we have made significant progress so far and it would be a pain.</li>
  </ol>