Using variables in @imported file

[indreksiitan]

I'm trying to include SemanticUI's LESS in my project and failing. They include their theme.config file, which sets a @themesFolder variable and then does @import "theme.less", which in turn tries to use the variable in another import: @import "@{themesFolder}/default/globals/site.variables", but fails stating that @themesFolder is not set.

So far, I've traced this down to:

Less_Tree_Import::ParseImport() imports theme.config and does: $root = $parser->parseFile($full_path, $uri, true); $ruleset = new Less_Tree_Ruleset(array(), $root->rules );

After that, the variable exists in $ruleset. It then calls: $ruleset->evalImports($import_env);

Function evalImports($env) iterates through $this->rules and if the rule is an import, then calls: $rules = $rule->compile($env);

Now, since the received $env is passed, what happens is that the variables defined in this particular ruleset up to the import are not available.

Am I on the right tracks? Is this a bug?

[kylekatarnls]

I tested your issue again my fork https://github.com/kylekatarnls/less.php and I confirm the bug. I will inspect it.

[indreksiitan]

@kylekatarnls - any insight on that?

[kylekatarnls]

Not solved, I have the following clue:

This fails only in the @import statement string. If I do a static-path import, then call themesFolder inside, it works.

So it's something about getting all the variables when calculate an import path.

[kylekatarnls]

Hi, it's fixed. Could you try to update to "kylekatarnls/less.php": "dev-master" version to check it works with your case before I release the tag?

[indreksiitan]

Unfortunately not. I still get the error, which is thrown in Less_Tree_Variable::compile(). When I var_dump the $env there, I see that the variable exists in $env->rules, but the function loops $env->frames looking for the variable.

[kylekatarnls]

I confirm, something's missing in my merge.

[kylekatarnls]

I'm so sorry, could you retry now?

[indreksiitan]

Sorry for the delayed answer, but - yeah works now. Thanks. (Works = "got past that, onto another error.")

[timmarner]

Hi Guys,

indreksiitan did you manage to get SemanticUI's LESS to compile ok. Im using octobercms which uses oyejorge/less.php to compile but am experiencing the same issues.

/* variable @themesFolder is undefined in file /.../assets/vendor/semantic-less/theme.less in theme.less on line 16, column 9 14| 15 */

Any help would be great, thanks!

[indreksiitan]

Unfortunately not. I managed to put together a repeatable test case and been trying to get in contact with @kylekatarnls in various ways to send it to him, but have not been able to.

[timmarner]

Thanks for the reply.

Are you using october CMS?

in meantime i will keep looking for an answer and will let you know if i find anything.

[indreksiitan]

Nope, we're using our own homegrown framework.

[timmarner]

is there a SASS version of semantic?

[indreksiitan]

Not that I'm aware of.

[indreksiitan]

Actually, there seems to be: https://github.com/doabit/semantic-ui-sass

[timmarner]

thanks. have just tried it and getting error if i include some element. the browser guest give me any info on the error though.

Sorry to go off topic but how can i find the whats causing the error. i can pinpoint the file.

thanks

[indreksiitan]

Tried the SCSS version. It compiles for me, although takes over 40 seconds to do so.

[indreksiitan]

But the real bummer is that there's virtually no customization besides font name and size - all colors etc are hardcoded.

[timmarner]

yeh it does take a while. if i disable importing or grid or menu it work but they both cant be imported or it throughs a error. stange.

Going back to the Semantic LESS i think its down to this @{variable} thats the problem in string @import url. is there an other way to do this:

@import "@{themesFolder}/default/globals/site.variables";

[PivitParkour94]

Getting this same issue when trying to dynamically import font from a hosted font service

@base_url: "//my.font-provider.com/css?font_family=";
@custom_font: "My+Awesome+Font:300,400,500,600";
@real-custom-font: "@{base_url}@{custom_font}";

...

a {
  @import url("@{real-custom-font}");
}