Geek Answers Handbook

Dynamic import for SCSS / Compass?

I have a SCSS project that builds on top of Foundation through Compass. It defines a set of sass variables, then defines a bunch of rules in terms of these variables: (my project has many other variable parameters and import statements, this is simplified.)

vars.scss

$foo = #fafafa $bar = 14px; // rules using $foo and $bar @import '_rules';

Then I use the compass to compile vars.scss , and everything works fine for this sass variable set. However, I also want the theme theme for my application to be different, and generate a different theme by defining a new set of variables that can override the original variables:

vars.scss

 $foo = #fafafa $bar = 14px; @import 'otherVars'; @import '_rules';

I cannot edit the file manually when I have 70 themes. (Having many topics is necessary for the purposes of my application.) I really want 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

Then it would be easy to snatch all the topics, because I could call compass once for each topic.

Does SCSS allow this? I looked at him, and that doesn't look like him.

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 topic, you must create a file that looks like this:

theme2.scss

 @import '_app_prefix'; // only override $foo - let the original value of $bar stand $foo = #ebebeb; @import '_app_suffix';

This works, but it is painful and introduces an additional pattern.

My next problem is to have @import 'rules_foo' extra instructions, which should also be built dynamically. So my overall fantasy would look like this:

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 a little convenient, but I hope you get this idea.)

Is there any way to do this? Or will I have to resort to steering wheels or another template?

+6
source share
3 answers

You can always create a temporary file that you send to the 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 would call it that:

 python stackoverflow.py themes/theme2 rules_1 rules_2 rules_3

And it creates / overwrites tmp.scss with the result you need.

0
source

SASS developers have problems considering the viability of this request .

Here are the people requesting this feature:

However, it supports it less and documents it very well: http://lesscss.org/features/#variables-feature-import-statements

+1
source

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

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

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

 @import "config";

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

NOTE. Of course, you can add a parameter to your Grunt task and have a dynamic name for this theme.

+1
source

More articles:


All Articles