Import as reference outputs results of each() functions

[rejhgadellaa]

When I use a reference import that includes a each() function, the result of that each() will be outputted in the css.

Example:

/** @file style.less */
@import (reference) url('each.less');

/** @file each.less */
@clr-white: #fff;
@clr-black: #000;

@colornames-list:
    white, black;

each(@colornames-list, {

    .color-@{value} {
        color: ~'@{clr-@{value}}';
    }

})

Will output:

/** @file style.css */
.color-white {
  color: #fff;
}
.color-black {
  color: #000;
}

This seems to be undesired behaviour. The documentation states:

Use @import (reference) to import external files, but without adding the imported styles to the compiled output unless referenced.

http://lesscss.org/features/#import-atrules-feature-reference

[seven-phases-max]

This seems to be undesired behaviour.

Actually it is expected behavior.
By styles it means explicitly defined CSS styles and not anything generated with mixins or functions (e.g. each in your case) - the latter is just beyond the scope of the reference functionality.
(For more complains on typical reference misuse see for example #2047. E.g. for your particular example you'd rather split your code into "source data/methods" (e.g. variables/mixins) and destination styles and you won't need the silly reference at all).

[rejhgadellaa]

Okay splitting would probably work.

Just realized that I probably can't use the classes I generate using each() as mixins anyway (haven't tested this but it wouldn't surprise me).

I guess I should do something like this:

/** @file style.less */
@import (reference) url('variables.less');
@import (reference) url('each.css');

.foo {
  color: @var; // from variables.less
  .color-black; // from each.css
}

So that way I could use the variables and the generated classes.. I think.

Gonna cost me a lot of refactoring and probably a more complicated gulp task to pre-process it all though :P

[seven-phases-max]

_{Personally I'd say never use CSS classes as mixins (except very very rare very very special cases)... Whatever they say. It's just structured beauty vs. unstructured mess).}

Either way, what is the point of using such generated classes as mixins? What your really need is just:

.color(@value) {
    @var: "clr-@{value}";
     color: @@var;
}

// and use .color(white); instead of color-white();

(That's another common mistake: "trying to encode mixin parameters into its name").

[rejhgadellaa]

Sorry for taking my time to respond.

The reason I generate these "class mixins" instead of using functions is that I was planning to be able to use these in html, too:

<div class="color-black">Black text</div>

Another use-case would be a grid system that is generated using each() so one wouldn't have to write every col-x-y rule by hand.

<div class="grid">
  <div class="row">
    <div class="col col-m-3"></div>
    <div class="col col-m-9"></div>
  </div>
</div>

It could be useful to import this grid by reference and use it in css..? Maybe I'm not thinking this through ;)

.layout {
  .grid;
  // other styles..
}
.layout__row {
  .row;
  // other styles..
}
.layout__col {
  .col;
  &:nth-child(1) { .col-m-3; }
  &:nth-child(2) { .col-m-9; }
}

Anyway, I've refactored everything so I import variables (as less) and classes (as css) separately so it all works fine.