在less中两次覆盖Twitter Bootstrap样式

Question

我有一个应用程序，其中包含两种样式。这两种样式是独立开发的，然后合并成一个 less 文件。这两种样式都使用 Twitter Bootstrap，通过使用自定义变量的 less 文件来覆盖它。目前它看起来像这样：

.outer { @import "bootstrap.less"; @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "bootstrap.less"; @import "inner-variables.less"; @import "more-inner.less" }

内部和外部使用不同的字体、颜色、边距等，这些都是在variables.less中自定义的。当然，它们也使用了许多其他规则。

这样做完全没问题，但会在我的CSS中生成两个完整的编译后的bootstrap副本。既然CSS和Less是层叠的，我认为应该有一种方法可以实现相同的效果，但只包含一次bootstrap.less。然而，我无法使其正常工作。有人知道如何解决吗？

以下是我尝试过的：

@import "bootstrap.less"; // doesn't compile, missing vars
.outer { @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "inner-variables.less"; @import "more-inner.less" }

并且：

@import "bootstrap.less";
@import "outer-variables.less"; 
@import "inner-variables.less"; // ends up using inner styles everywhere
.outer { @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "inner-variables.less"; @import "more-inner.less" }

两者都不起作用。正确的做法是什么？

- Paul Biggar

Answer 1

我认为@import-once（实际上是LESS 1.4中@import的默认设置，但在之前的版本中不是）应该能够帮到你。也许可以尝试这样做：

想法 #1

.outer { 
 @import-once "bootstrap.less"; 
 @import "outer-variables.less"; 
 @import "more-outer.less" 
}
.inner { 
 @import-once "bootstrap.less"; 
 @import "inner-variables.less"; 
 @import "more-inner.less" 
}

这个应该可以避免重新导入整个引导框架，但是因为你将它嵌套在选择器内部，所以我可能对此有所错误。我没有专门测试过这个。

如果这不起作用，那么也许...

想法#2

 @import "bootstrap.less"; 
 @import "outer-variables.less"; /* give bootstrap some initial variables */    
.outer { 
 @import "more-outer.less" /* use initial variables */
}
.inner { 
 @import "inner-variables.less"; /* override initial variables inside inner */
 @import "more-inner.less" /* use override variables */
}

- ScottS