I encountered a situation that was quite similar to yours. We had a significant amount of existing SASS code that needed to be updated to incorporate dynamic values/variables for use throughout the stylesheets. Initially, I took the approach of creating temporary directories and files to serve as a "proxy entry point." This involved generating a proxy_entry.scss, variables.scss, and bootstrapping the actual entry.scss with the necessary SASS variables. While this method yielded the desired results, it felt somewhat convoluted...

Fortunately, there is a simpler solution available thanks to the node-sass options.data feature. This option allows for the evaluation of a "SASS string."

Type: String Default: null Special: file or data must be specified

A string that is passed to libsass for rendering. It is recommended to use includePaths in conjunction with this so that libsass can locate files when using the @import directive.

This approach completely eliminates the need for managing temporary directories and files.

Visual TL;DR

https://i.stack.imgur.com/G0Hpy.png

The basic concept boils down to:

1.) Define sassOptions as usual

var sassOptionsDefaults = {
  includePaths: [
    'some/include/path'
  ],
  outputStyle:  'compressed'
};

2.) Construct the "dynamic SASS string" for options.data

var dataString =
  sassGenerator.sassVariables(variables) +
  sassGenerator.sassImport(scssEntry);
var sassOptions = _.assign({}, sassOptionsDefaults, {
  data: dataString
});

3.) Evaluate the SASS like usual

var sass = require('node-sass');
sass.render(sassOptions, function (err, result) {
  return (err)
    ? handleError(err);
    : handleSuccess(result.css.toString());
});

Note: This assumes that your entry.scss includes a variables.scss file that defines variables as "defaults."

// variables.scss
$someColor: blue !default;
$someFontSize: 13px !default;

// entry.scss
@import 'variables';
.some-selector { 
  color: $someColor;
  font-size: $someFontSize;
}

Putting it all together with an example

var sass = require('node-sass');

// 1.) Define sassOptions as usual
var sassOptionsDefaults = {
  includePaths: [
    'some/include/path'
  ],
  outputStyle:  'compressed'
};

function dynamicSass(scssEntry, variables, handleSuccess, handleError) {
  // 2.) Create "SASS variable declarations" dynamically
  // then import the actual entry.scss file.
  // dataString represents the SASS to evaluate before
  // importing the entry.scss.
  var dataString =
    sassGenerator.sassVariables(variables) +
    sassGenerator.sassImport(scssEntry);
  var sassOptions = _.assign({}, sassOptionsDefaults, {
    data: dataString
  });

  // 3.) Render sass as normal
  sass.render(sassOptions, function (err, result) {
    return (err)
      ? handleError(err);
      : handleSuccess(result.css.toString());
  });
}

// Example usage.
dynamicSass('some/path/entry.scss', {
  'someColor': 'red',
  'someFontSize': '18px'
}, someSuccessFn, someErrorFn);

Functions such as "sassGenerator" could resemble:

function sassVariable(name, value) {
  return "$" + name + ": " + value + ";";
}

function sassVariables(variablesObj) {
  return Object.keys(variablesObj).map(function (name) {
    return sassVariable(name, variablesObj[name]);
  }).join('\n')
}

function sassImport(path) {
  return "@import '" + path + "';";
}

This method allows you to continue writing your SASS as before, utilizing SASS variables wherever they are needed. It also does not restrict you to any specific dynamic SASS implementation (e.g., avoiding the use of underscore/lodash templating within your .scss files). Moreover, it enables you to leverage IDE features, linting, etc., just as before because you are once again writing standard SASS.

Furthermore, it seamlessly transitions to non-node/http/compile-on-the-fly scenarios, such as pre-compiling multiple versions of entry.scss with different sets of values via Gulp, among others.

I trust that this guidance will be beneficial to you, @ChrisWright, and others facing similar challenges! Finding information on this topic was tough for me, and I believe this use case is quite common (needing to inject dynamic values into SASS from a Database, configuration, HTTP parameters, etc.).

My breakthrough came when I delved into the importer() method of node-sass. To solve my problem, I utilized underscore templates and manually processed files as they were loaded. Although not the most elegant or efficient approach, this solution is only executed once for each page generation. Subsequently, the files are compressed and stored in cache for future access.

// Other render parameters excluded for simplicity
importer: function (url, prev, done) {

    // Read each partial file manually as it's encountered
    fs.readFile(url, function (err, result) {
        if (err) {

            // In case of read error, prevent a crash by calling done() with no content
            return done({
                contents: ''
            });
        }

        // Convert the partial into an underscore template
        var partial = _.template(result.toString());

        // Compile the template and feed its output back to node-sass for compilation along with other SCSS partials
        done({
            contents: partial({ data: YOUR_DATA_OBJECT })
        });
    });
}

This approach allows us to include standard underscore variable syntax within our SCSS partials. For instance:

body {
    color: <%= data.colour %>;
}