我正在使用Bootstrap 3.0少1.5.我将为许多站点使用相同的bootstrap.css(或使用他们的CDN).所以我正在使用 @import (reference) "bootstrap-3.0.0/less/bootstrap.less";@import (reference) "bootstrap-3.0.0/less/mixins.les
@import (reference) "bootstrap-3.0.0/less/bootstrap.less"; @import (reference) "bootstrap-3.0.0/less/mixins.less";
仅作为参考导入.
我的app.less(其中包括)
.herocontainer{ .make-row(); .iphoneblock{ .make-sm-column-offset(1); .make-sm-column(4); text-align: center; } .copyblock{ .make-sm-column(5); text-align: center; .copytext{ @media(min-width: @screen-sm) { padding-top: 100px; } } .buybutton{ .btn-lg; .btn-primary; background-color: #d6822f; } } }
生成的站点只是单列输出.但是,如果我从mixins中删除(引用),例如:
@import (reference) "bootstrap-3.0.0/less/mixins.less";
然后我得到一个两列响应输出,但生成的CSS也有我不需要的类.
所以,
a)我如何才能在css中获取我在app.less中编写的类,而不是使用bootstrap类来膨胀
b)我如何调试这样的CSS问题? (我确实使用Google Chrome工具,但这个问题比我能理解/调试的要多)
谢谢,
约瑟夫
No actual code will output from that file as CSS, but all becomes available to use as mixins.
在你的情况下,它们将与例如make-sm-column()有所区别,这个mixin包含一个媒体查询定义.如果您在导入mixins时使用(引用).此媒体查询部分不包含在您的CSS中.
// Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } }
会给:
.herocontainer { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .herocontainer { float: left; width: 33.33333333333333%; } }
使用(参考)你只会得到:
.herocontainer { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
注意你也使用来自buttons.less的btn-lg.对我而言,它似乎是引用button.less但不是mixins.less的最佳解决方案(理论mixins只应包含mixins,因此引用应该有所不同).否则只需要你需要的mixins来创建一个mixins.less.
UPDATE
>有一个错误Reference import not importing media queries>当引用导入中的类从未引用的导入调用mixin时,此mixin的输出将在(css)中显示(意外).所以在上面的答案中没有使用mixins.less的参考确实会给很多不需要的类