Bootstrap & LESS：仅将mixin导入为参考

Question

我正在使用Bootstrap 3.0和LESS 1.5。我将对许多站点使用相同的引导程序.css或使用他们的 CDN）。所以我正在使用

@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.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;
            }
    }
}

生成的站点只是单列输出。但是如果我从混合中删除（参考），例如：

@import (reference) "bootstrap-3.0.0/less/mixins.less";

然后我得到一个两列响应输出，但生成的 css 也有我不需要的类。

所以a） 我如何仅在 CSS 中获取类，仅适用于我在 app.less 中编写的类，而不是使用引导类臃肿b） 我该如何调试此类 CSS 问题？（我确实使用谷歌浏览器工具，但这个问题超出了我所能理解/调试的范围）

谢谢
约瑟夫

Answer 1

另请参阅：https://stackoverflow.com/a/14463540/1596547。其中说：

没有实际的代码会从该文件输出为 CSS，但所有代码都可以用作 mixins。

在您的情况下，它们将有所不同，例如make-sm-column()此mixin包含媒体查询定义。如果您在导入mixins.less时使用(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;
}

注意，您还使用btn-lg来自按钮。对我来说，引用按钮似乎是最好的解决方案，但不是mixins.less（理论上的mixin应该只包含mixin，所以引用应该有任何区别）。否则，创建一个 mixins.less 只包含您需要的 mixin。

更新

1. 存在引用导入不导入媒体查询的错误
当引用导入
2. 中的类从未引用的导入调用 mixin 时，此 mixin 的输出将（意外）显示在您的 CSS 中。所以在上面的答案中不使用mixins.less的引用确实会给出很多不需要的类