LESS compilation error Mixin undefined

0
votes

I am new to LESS and am trying to create a complex structure to my LESS files so I can separate the front end framework files from my platform files from my client specific changes.... So to that end I have a structure using @import "filename.less"; like this (all separated into sub folders....)

master.less > platform.less > bootstrap.less > variables.less
                                             > mixins.less
                                             > ............etc

                            > font-awesome.less > ........etc

                            > bootstrap-ui.less > ........etc

                            > platform-variables.less
                            > platform-mixins.less
                              ......... etc

            > site.less > site-variables.less
                          ...............etc..
                          random-page.less

OK so master.less has a import to platform.less and site.less etc....

My question how come I am able to use the mixins defined in mixins.less file.... in random-page.less but not able to use the mixins defined in my custom mixin file in random-page.less (platform-mixins.less) that is called from the platform.less file I'm very confused.... please advise.

The error that I receive is:

>> NameError: .no-padding is undefined in css/site/random-page.less on line 75, column 3:
>> 74   .footer-sidebar {
>> 75           .no-padding;
>> 76   }

Which is true because it does not exist in this file? However the bootstrap standard mixin works as expected despite the clear fix mixin/class not existing in this file... .footer-sidebar { .clearfix; }

Is this a LESS issue which SASS or Stylus etc.... resolves please advise.

1
csslesscss-preprocessor
To say for sure we need to see how exactly this .no-padding is defined (For example is this really a mixin defined in the global scope and not something buried deep deep under other selector(s)?). - seven-phases-max
Sure my mixin is super simple: .no-padding() { padding:0; } Just to be certain I checked the compiled code which is as expected: .no-padding { padding:0; } - Angus Grant
So I can't see any reason why it coould be not visible. I'm afraid it's impossible to suggest anything w/o seeing the whole project. (As you say above Bootstrap mixins defined and used same way work just fine so it must be something very simple - for example don't you try to compile site.less separately from master.less? That way it won't work of course (countrary platform.less can be compiled alone since it includes all used components)). How do you compile all that, btw.? - seven-phases-max
Thanks for your input... Yes, all files get compiled into one CSS file... not separate files... I will investigate further in the morning and thanks again for your help. - Angus Grant
Thank you for your help the issue is now resolved. It was not a result of the LESS structure shown above this worked fine. But as part of the build i was also generating further CSS files that also had a dependency on site.less file but didn't include the platform.less file DOE. Hence in this context the mixin was not found. - Angus Grant

1 Answers

0
votes

To understand your structure i create five files as follow:

  1. master.less:

-

.master {master:1;}
@import "site";
@import "platform";
  1. platform.less

-

.platform {platform:1;}
@import "platform-mixins.less";
  1. platform-mixins.less

-

.platform-mixins {platform-mixins:1;}
.platform-mixin() {color: red;}
  1. random-page.less

-

.random-page {
.platform-mixin()
}
  1. site.less

-

.site {site:1;}
@import "random-page";

After that i run lessc master.less which outputs the following CSS code:

.master {
  master: 1;
}
.site {
  site: 1;
}
.random-page {
  color: red;
}
.platform {
  platform: 1;
}
.platform-mixins {
  platform-mixins: 1;
}

as expected the .platform-mixin() from platform-mixins.less can be called without errors in random-page.less. So make sure that your mixin exists and that you really import the files you mention.