使用less映射出来的变量一直提示未找到

Question

文件a.less

#colorRules{
  @colora: #red;
  @colorb: #blue;
}
@ns: #colorRules();

文件b.less

    #colorRules{
      @colora: #dark;
      @colorb: #232323;
    }
    @ns: #colorRules();

文件 index.less
`

@import a.less;
.color-factory(@obj){
    @v-colora: "colora";
    @v-colorb: "colorb";
    color: @obj[@@v-colora];
    background: @obj[@@v-colorb];
}
.box {
    .color-factory(@ns);
    &.theme-dark {
     @import b.less;
        .color-factory(@ns);
    }
}

在index.less文件中，在.theme-dark调用.color-factory的时候一直报 Variable @colorb not found

Answer 1

颜色值为颜色名时前面不需要加 #

#colorRules {
  @colora: red;
  @colorb: blue;
}
@ns: #colorRules();

.color-factory(@obj) {
  @v-colora: 'colora';
  @v-colorb: 'colorb';
  color: @obj[ @@v-colora];
  background: @obj[ @@v-colorb];
}

.box {
  .color-factory(@ns);
  &.theme-dark {
    #colorRules {
      @colora: #000;
      @colorb: #232323;
    }
    @ns: #colorRules();
    .color-factory(@ns);
  }
}

output

.box {
  color: red;
  background: blue;
}
.box.theme-dark {
  color: #000;
  background: #232323;
}

根据你的代码逻辑直接这样写就可以了：

.color-factory(@color; @bg) {
  color: @color;
  background: @bg;
}

.box {
  .color-factory(red, blue);
  &.theme-dark {
    .color-factory(#000, #232323);
  }
}