Allow for Dynamic @import Calls

[parkr]

I cannot seem to use variables when using the @import command. I have 2 different styles (white & red) that I want to choose from. As I understand it, this is a Sass issue. At the moment, I have:

screen.scss:

@import "main";

main.scss:

$banner_color: "white";
@import "partials/identity";
@import "partials/search";

partials/_identity.scss:

@import "identities/cu-" + #{$banner_color};

partials/_search.scss:

@import "identities/search-" + #{$banner_color};

And I get this error when running compass compile:

     error sass/partials/_identity.scss (Line 1: Invalid CSS after "...dentities/cu-" ": expected selector or at-rule, was "+ #{$banner_col...")
      error sass/partials/_identity.scss (Line 1: Invalid CSS after "...dentities/cu-" ": expected selector or at-rule, was "+ #{$banner_col...")

It doesn't look like the variable is being properly concatenated. I tried interpolation (@import "identities/cu-#{$banner_color}) but that fails too...

Any reason this doesn't work?

[chriseppstein]

closing: explanation here: Compass/compass#613

[parkr]

I understand what you've written there, but don't see how the implementation of this becomes "annoying and slow". The declaration of the variable $banner_color, as long as it precedes the @import call, should not harm compile time in any way, at least as I see it. Perhaps you could provide further insight. Thank you.

[chriseppstein]

as things stand right now, we have to parse a file into an abstract syntax tree (AST) to find the imports. Unlike CSS, imports can be anywhere -- including a scoped context -- so variables might have been computed, changed, etc. So the only way to know what imports that exist in this case is to go another step further by doing a perform which runs all the sass script and reduces the AST to a version that doesn't have any sass script in it.

[parkr]

Is there an efficient way to traverse the AST, looking for the value of this variable? No CSS compilation should be required.

[chriseppstein]

no, there's not. as I pointed out the value of variable can be changed during the execution. The only way to know the value is to run the scripts.

[parkr]

Ok. So it's laggy and slow because you have to compile part of the script to find this value? Can you cache the resulting CSS from the partial compile and concatenate the rest once the proper file has been imported?

[chriseppstein]

yes. that's what I meant by annoying. I never said it was impossible.

[parkr]

Got it. So this is on the back-burner until you can find a not so annoying way of implementing this? Can you leverage the Sass Cache?

[chriseppstein]

It's not on our list of planned features.

[parkr]

Ok! I'll take that as a "shut down".

[chriseppstein]

I think you'll find a way to achieve your desired effect without this feature by looking at the problem from a different angle. If you can't send an email to the list with what you're trying to accomplish and we'll brainstorm how.

[chriseppstein]

See #739