Less Bootstrap&；减：仅作为引用导入mixin

我使用的是Bootstrap3.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有（除其他外）

结果站点只是单列输出。但是如果我从mixin中删除（引用），比如：

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

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

所以， a） 如何仅为我在app.less中编写的类获取css中的类，而不使用过多的引导类 b） 如何调试此类css问题？（我确实使用Google chrome工具，但这个问题超出了我的理解/调试范围）

谢谢你，
约瑟夫

另见：。上面说：

没有实际的代码将作为CSS从该文件输出，但所有代码都可以作为混音使用

在您的情况下，它们将与例如

make-sm-column（）

此mixin包含媒体查询定义不同。如果在导入mixin.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%;
  }
}

使用

（参考）

您只会得到：

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

请注意，您还可以将

btn lg

与Comed from buttons.less一起使用。对我来说，这似乎是引用button.less而不是mixins.less的最佳解决方案（理论上的mixin应该只包含mixin，所以引用应该会有所不同）。否则，仅使用所需的mixin创建mixins.less

更新

有一只虫子

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

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}