引导程序更少:仅导入mixin作为参考 [英] Bootstrap & LESS: importing mixins only as reference

问题描述

我正在使用Bootstrap 3.0&少1.5.我将在许多站点上使用相同的bootstrap.css(或使用其CDN).所以我正在使用

I am using Bootstrap 3.0 & LESS 1.5. I'll be using the same bootstrap.css for many sites (or use their CDN). So I am using

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

仅作为参考导入.

我的app.less拥有(等等)

My app.less has (among otherthings)

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

结果站点只是单列输出.但是，如果我从混合中删除(引用)，例如:

The resulting site is just single column output. But if I remove (reference) from the mixins, like:

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

然后我得到两列响应输出，但是生成的css也具有我不需要的类.

then I get a two column responsive output, but the resulting css also has classes that I don't need.

所以， a)如何仅针对我在app.less中编写且未因引导程序类而肿的类获得css中的类 b)我该如何调试此类CSS问题? (我确实使用了Google chrome工具，但是这个问题超出了我的理解/调试范围)

So, a) how do I get classes in css only for the ones that I write in app.less and not bloated with bootstrap classes b) how do I go about debugging such css issues? (I do use Google chrome tools but this issue is more than I can understand/debug)

谢谢你，
约瑟夫

Thank you,
Joseph

推荐答案

另请参见: https://stackoverflow.com/a/14463540/1596547 .上面写着:

Also see: https://stackoverflow.com/a/14463540/1596547. Which says:

该文件不会将任何实际代码作为CSS输出，但是所有代码都可以用作mixin.

No actual code will output from that file as CSS, but all becomes available to use as mixins.

如果您的情况有所不同，例如make-sm-column()，则此混合包含媒体查询定义.如果在导入mixins时使用(reference).less，此媒体查询部分将不包含在CSS中.

In you case their will be a difference with for example make-sm-column() this mixin contains a media query definition. If you use (reference) when importing mixins.less this media query part is NOT include in your 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与button.less一起使用.对我来说，似乎最好的解决方案是引用button.less而不是mixins.less(理论上的mixins应该只包含mixins，因此引用应该有所不同).否则，仅使用您需要的mixins创建一个mixins.less.

NOTE you also use btn-lg with came from buttons.less. For me it seems the best solution to reference button.less but not mixins.less (theoretical mixins should contain mixins only, so referencing should make any difference). Otherwise create a mixins.less with only the mixins you will need.

更新

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

这篇关于引导程序更少:仅导入mixin作为参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！