用更少的时间覆盖 twitter 引导程序，两次答案

【问题标题】：Overriding twitter bootstrap in less, twice用更少的时间覆盖 twitter 引导程序，两次
【发布时间】：2013-06-04 19:33:34
【问题描述】：

我有一个包含两种样式的应用程序。两种风格都是独立开发的，然后合并到一个less文件中。两种样式都使用 twitter bootstrap，通过使用自定义 variables.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 中生成 2 个完整的已编译引导程序副本。看到 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" }

都不行。这样做的正确方法是什么？

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案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 */
}

【讨论】：