Dynamic imports for SCSS / Compass? - compass-sass

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!

Answer 2

You could always generate a temporary file that you send to compass. With python code:
import sys
with open('tmp.scss', 'w') as out:
out.write(("""
$foo = #fafafa
$bar = 14px;
#import '%(pre-rules)s';
#import '_rules';
%(post-rules)s
""" % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["#import '%s';" % x for x in sys.argv[2:]])}).strip())
You'd call it like:
python stackoverflow.py themes/theme2 rules_1 rules_2 rules_3
And it creates/overwrites tmp.scss with the output you want.