较小的变量会被下一个文件覆盖

Question

我有以下结构：

app.less
      @import a.less
      @import b.less

a.less看起来像：

@import (reference) "bootstrap/variables";
@grid-columns: 10;

.someClass{    
   .make-sm-column(5);
}

当我将a.less编译成a.css时，我得到：

.aClass{
  ...
  width: 50%;
}

b.less看起来像：

@import (reference) "bootstrap/variables";
@grid-columns: 100;

所以当app.less编译成app.css时我得到了

.aClass{
  ...
  width: 5%;
}

似乎@ grid-columns被b.less覆盖了。我该如何防止这种行为？

更新：即使我把@ grid-columns：10放在一个类中，它仍然无效。看起来变量不是选择器的范围。

Answer 1

  

当定义变量两次时，使用变量的最后一个定义，从当前范围向上搜索。这与css本身类似，其中定义中的最后一个属性用于确定值。   http://lesscss.org/features/#variables-feature

两个相同的范围，相同的变量名称，只使用第二个。尝试使用不同的变量名称：

@grid-columns-100: 100;
@grid-columns-10: 10;