少變量變成由下一個文件覆蓋

我有以下結構：少變量變成由下一個文件覆蓋

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%; 
}

好像@格列變成由b.less覆蓋。我怎樣才能防止這種行爲？

更新：即使我把@ grid-columns：10放在一個類裏面，它仍然不起作用。看起來像一個變量不適用於選擇器。

來源

2016-09-13 Julian

更改名稱？ –

不要使用相同的變量名稱 –

可能你需要的是類似的東西：http://stackoverflow.com/questions/30414276。「這看起來像一個變量不適用於選擇器。」 - 它實際上是，但是因爲'.make-sm-column'是一個全局混合，它應該首先查找全局的'@ grid-columns'（因此類範圍變量沒有效果） - 請參閱鏈接以找到如何操作它。 –

定義變量兩次時，使用變量的最後一個定義，從當前範圍向上搜索。這與使用定義內最後一個屬性來確定值的css本身很相似。 http://lesscss.org/features/#variables-feature

在兩個變量名中相同的變量名，只有第二個將被使用。嘗試使用不同的變量名稱：

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

來源

2016-09-13 18:29:36

那麼在這種情況下，我可以使用這個變量grid-columns在哪裏使用一個mixin（例如，一個bootstrap.less的make-xs-column）？如何在不同的文件中使用不同的grid-columns變量值來使用這個mixin？ – Julian

您可以傳遞參數給mixins，至少在SASS中（我沒有使用過少量）。 –

是的，我可以，但我很好奇如何使用bootstrap mixin提供的。在文章http://willschenk.com/bootstrap-advanced-grid-tricks/中提到，一個可變的grid-columns被限定在一個選擇器中，但它看起來不像那樣工作。 – Julian

少變量變成由下一個文件覆蓋

回答

相關問題