Bootstrap&LESS:仅作为参考导入mixins

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;
            }
    }
}

生成的站点只是单列输出.但是,如果我从mixins中删除(引用),例如:

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

然后我得到一个两列响应输出,但生成的CSS也有我不需要的类.

那么,a)我如何才能在css中获取我在app.less中编写的类而不是使用bootstrap类膨胀b)如何调试这样的css问题？(我确实使用Google Chrome工具,但这个问题比我能理解/调试的要多)

谢谢你,
约瑟夫

Answer 1

另请参阅:https://stackoverflow.com/a/14463540/1596547.哪个说:

没有实际的代码将从该文件输出为CSS,但所有代码都可用作mixins.

在你的情况下,它们将是一个区别,例如make-sm-column()这个mixin包含媒体查询定义.如果您(reference)在导入mixins时使用.此媒体查询部分不包含在您的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的最佳解决方案(理论mixins只应包含mixins,因此引用应该有所不同).否则只需要你需要的mixins来创建一个mixins.less.

UPDATE

1. 有一个错误参考导入不导入媒体查询
2. 当引用导入中的类从未引用的导入调用mixin时,此mixin的输出将在(css)中显示(意外).所以在上面的答案中没有使用mixins.less的参考确实会给很多不需要的类