引导程序LESS:导入 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;
            }
    }
}

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

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) 我如何在 css 中只为我在 app.less 中编写的而不是用引导类膨胀的类获取类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)

谢谢，
约瑟夫

推荐答案

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

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

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

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

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