less - Bootstrap & LESS : importing mixins only as reference

Question

我正在使用 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 工具，但这个问题超出了我的理解/调试范围)

谢谢，
约瑟夫

Answer 1

另见:https://stackoverflow.com/a/14463540/1596547 .其中说:

No actual code will output from that file as CSS, but all becomes available to use as 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来自buttons.less。对我来说，这似乎是引用 button.less 但不是 mixins.less 的最佳解决方案(理论上的 mixin 应该只包含 mixins，所以引用应该有任何区别)。否则创建一个 mixins.less 只包含你需要的 mixins。

更新

有一个错误 Reference import not importing media queries

当引用导入中的类从未引用的导入调用 mixin 时，此 mixin 的输出将(意外)显示在您的 css 中。所以在上面的答案中不使用 mixins.less 的引用确实会给出很多不需要的类