我正在使用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.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问题? (我确实使用谷歌浏览器工具,但这个问题比我能理解/调试的更多)
谢谢你,
约瑟夫
答案 0 :(得分:6)
另见:https://stackoverflow.com/a/14463540/1596547。其中说:
没有实际代码从CSS输出该文件,但所有代码都可以用作mixins。
在你的情况下,它们将与例如make-sm-column()
不同,这个mixin包含媒体查询定义。如果您在导入mixins时使用(reference)
。此媒体查询部分不包含在您的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%;
}
}
使用(reference)
只会得到:
.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。
<强>更新强>