1

theme.less:

@theme: blue, red;
.createTheme(@i:1) when (@i <= length(@theme)) {
  @name: extract(@theme, @i);
  @import "@{name}.less";
  .@{name} {
    background: @footer-bg;
}
.createTheme()

blue.less:

@footer-bg:blue;

red.less:

@footer-bg:red;

I got error:

Module build failed: Recursive variable definition for @i
 @ D:\app\theme.less (line 10, column 0)
 near lines:

   .createTheme();

Any solution to fix that?

unbindall
  • 514
  • 1
  • 13
  • 29
hguser
  • 35,079
  • 54
  • 159
  • 293
  • @import is a "static" construction (for multiple reasons), i.e. when you put it into a mixin, the import is resolved not when you call the mixin but when compiler reads the mixin definition, i.e. it's equal to just defining a mixin with the contents of the imported file (thus the interpolated variable may not be or depend on a mixin parameter). As for "multitheme" approach, there're a lot of methods to achieve the same w/o spoling the import interpolation. For example using [namespaces](https://gist.github.com/seven-phases-max/5a43eb0e3eab34bc737963ddf93f487c). – seven-phases-max Apr 29 '16 at 10:55
  • For other multitheming patterns see also http://stackoverflow.com/questions/25875846 (and other topics linked there). For the general weirdness of abusing the interpolated imports feature see [#2772](https://github.com/less/less.js/issues/2772), [#2442](https://github.com/less/less.js/issues/2442). – seven-phases-max Apr 29 '16 at 10:55
  • There are too many styles to be defined in the theme, and also there are almost 20+ themes, the solution you mentioned will cause too many codes. – hguser May 02 '16 at 09:19
  • *"the solution you mentioned will cause too many codes."* You did not read all, did you? Because (one of) `namespace`-based solutions can be reduced to almost no additional code at all (if the compactness *is* the main goal, though usually it has negative effects on other aspects). – seven-phases-max May 02 '16 at 11:03

0 Answers0