覆盖twitter引导程序,减少两次

时间:2013-06-08 17:18:27

标签: css twitter-bootstrap 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" }

都没有工作。这样做的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

我认为@import-once(实际上是@import的LESS 1.4中的默认值,但在以前的版本中不是默认值)可以帮助您。也许是这样的:

想法#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 */
}