我正在使用 Bootstrap 3.0 和 LESS 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;
}
}
}
生成的站点只是单列输出。但是如果我从 mixin 中删除(引用),例如:
@import (reference) "bootstrap-3.0.0/less/mixins.less";
然后我得到两列响应式输出,但生成的 css 也有我不需要的类。
所以,
a) 如何在 css 中获取仅适用于我在 app.less 中编写的类,并且不会因引导类而变得臃肿
b) 我该如何调试此类 css 问题? (我确实使用 Google Chrome 工具,但这个问题超出了我的理解/调试范围)
谢谢你,
Joseph
另请参阅:https://stackoverflow.com/a/14463540/1596547。其中说:
该文件不会以 CSS 形式输出任何实际代码,但所有代码都可以用作 mixins。
在你的情况下,他们会有所不同,例如make-sm-column()
该 mixin 包含媒体查询定义。如果你使用(reference)
当导入 mixins.less 时,这个媒体查询部分不包含在你的 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;
}
注意您还使用btn-lg
with 来自buttons.less。对我来说,这似乎是引用 button.less 但不是 mixins.less 的最佳解决方案(理论上的 mixins 应该只包含 mixins,所以引用应该会有所不同)。否则,创建一个 mixins.less ,仅包含您需要的 mixins 。
UPDATE
有一个错误引用导入不导入媒体查询罢工>
- 当引用导入中的类从未引用导入中调用 mixin 时,该 mixin 的输出将(意外)显示在您的 css 中。所以在上面的答案中,不使用 mixins.less 的引用确实会给出很多不需要的类
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)