少ない変数は次のファイル

Question

によって上書きされてしまう私は、次のような構造を持っている：私は私が手a.cssするa.lessをコンパイルすると

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

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

：

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

a.lessは、次のようになります。

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

b.lessは、次のようになります。

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

のでapp.lessがapp.cssするようにコンパイルされたとき、私は

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

を得ることがb.lessによって上書きされてしまう@グリッド・カラムのように思えます。どのように私はこの動作を防ぐことができますか？

更新：@ grid-columns：10をクラス内に入れても、まだ動作しません。変数がセレクタのスコープではないようです。

Answer 1

変数を2回定義する場合、変数の最後の定義が使用され、現在のスコープから上方向に検索されます。これは、定義内の最後のプロパティを使用して値を決定するcss自体に似ています。 http://lesscss.org/features/#variables-feature

同じ変数名には同じスコープが使用され、2番目の変数のみが使用されます。異なる変数名を使用してみてください：

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