less, producing the wrong output

Question

Main file

@import (reference)  './kendo1.less';

.FadedGrid
{
    @import (reference)  './kendo2.less';
}

.FadedGrid
{
    @import (reference)  './kendo2.less';

    .k-grid-header th
    {
        background-color: @input-background-color;
    }
}

kendo1.less

@input-background-color: #000;

kendo2.less

@input-background-color: #fff;

This produces

.FadedGrid .k-grid-header th {
  background-color: #000000;
}

But the colour here should be #ffffff, not #000000

Answer 1

You need to change you import from reference to multiple. If you set it to reference it seems to ignore the duplicate imports of the same file.

Import options: http://lesscss.org/features/#import-options

Example:

@import (reference)  './kendo1.less';

.FadedGrid
{
  @import (multiple)  './kendo2.less';
}

.FadedGrid
{
      @import (multiple)  './kendo2.less';

  .k-grid-header th
  {
    background-color: @input-background-color;
  }
}

Output:

/* Generated by less 2.4.0 */
.FadedGrid .k-grid-header th {
  background-color: #ffffff;
}