Dynamic imports for SCSS / Compass?

Question

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.)

vars.scss:

$foo = #fafafa
$bar = 14px;

// rules using $foo and $bar
@import '_rules';

I then use compass to compile vars.scss, 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:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import 'otherVars';

@import '_rules';

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:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';

And then I could call something like:

compass --otherVars themes/theme2

It would then be easy to whip out all the themes, because I could call compass once for each theme.

Does SCSS let you do this? I looked into it, and it doesn't look like it.

My current workaround is to split the original vars.scss into a prefix and suffix:

_app_prefix.scss:

$foo = #fafafa
$bar = 14px;

_app_suffix.scss:

@import '_rules';

app.scss:

@import '_app_prefix';
// no overrides by default
@import '_app_suffix';

And to override it for a specific theme, you'd make a file that looks like:

theme2.scss:

@import '_app_prefix';

// only override $foo - let the original value of $bar stand
$foo = #ebebeb;

@import '_app_suffix';

This works, but is sorta painful and introduces additional boilerplate.

My next problem is wanting to have additional @import 'rules_foo' statements, which also need to be constructed dynamically. So my overall fantasy would look like:

vars.scss:

$foo = #fafafa
$bar = 14px;

@import '{{otherVars}}';

@import '_rules';
{{ @import 'additional_rules' for additional_rules in rules }}

And I could call:

compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3"

(Obviously this is somewhat handwavy but hopefully you get the idea.)

Is there a way to do this? Or am I going to have to resort to handlebars or some other templating language?

Answer 1

For people who are using Grunt to compile their SCSS/SASS files, the solution was to add an extra parameter loadPath to "sass" task configuration as follows:

sass: {
  options: {
    loadPath: ['../src/css/themes/myTheme/'],
    style: 'nested',
    precision: 2
  },

And then in the /src/css/import.scss you can include those files from the theme as if they were in current directory:

@import "config";

The file was included from /src/css/themes/myTheme/config.scss.

NOTE: You can of course add a parameter to your Grunt task and have that theme name dynamic!