使用 Bootstrap 3 less mixin 时避免使用多个“@media”答案

【问题标题】：Avoiding multiple "@media" when using Bootstrap 3 less mixins使用 Bootstrap 3 less mixin 时避免使用多个“@media”
【发布时间】：2013-12-16 03:16:55
【问题描述】：

当使用较少的 mixin 来使用 Bootstrap 构建网站时，我会这样做：

#logo {
   .make-sm-column(3);
   .make-md-column(3);
   .make-lg-column(3);
}
#menu {
       .make-sm-column(5);
       .make-md-column(5);
       .make-lg-column(5);
    }

这在 .less 文件中看起来非常整洁，但它确实使编译后的 css 膨胀了很多，不是吗？每个带有这种 mixin 的类和 id 都有自己的一组媒体查询：

@media (min-width: 768px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 992px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 1200px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 768px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }
    @media (min-width: 992px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }
    @media (min-width: 1200px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }

使用 column-mixin 对每个类/id 重复此操作。我认为将这些定义组合在 3 个媒体查询块中会更优雅、更有效。

有没有办法我可以（半）自动地做到这一点。我目前正在使用 Windows 并使用 WinLess 进行编译，但还没有找到这样的选项。

【问题讨论】：

标签： css twitter-bootstrap less mixins

【解决方案1】：

在当前的 Bootstrap 版本中有 .make-xs-column mixin，它会生成相同的 CSS 而无需任何媒体查询。

【讨论】：

.make-xs-column mixin 不添加媒体查询，因为 bs3 是移动优先的。但这不是我的问题：我想要媒体查询，因为我想要响应式布局，但我希望它们集中在 3 个块中，而不是分散在 css 周围数十/数百次
但是，在每个媒体查询的选择器中完全使用相同的代码有什么意义呢？请注意，无论最小宽度值如何，所有三个 make 函数都会生成 绝对相同 代码（即，这些媒体查询对 float 和 width 值没有影响，因此将这三个 .make 调用替换为一个 @ 987654326@ 电话会给你同样的结果，没有媒体膨胀）。
无论哪种方式，您都无能为力 - 这就是这些 mixin 的编写方式（即，一旦通过 mixin 调用生成媒体查询（例如.make-sm-column(3);），您就不能将它与另一个 mixin 扩展生成的媒体查询合并（例如.make-sm-column(5);）。也许你可以将它与其他一些后处理工具（例如 CSS 缩小器之一）合并，但我不知道是否有任何真正能够做到这一点.
另一种方法就是编写你自己的make-column mixins 来处理所有这些“正确的方式™”，这并不难，但这意味着你必须审查/每次更新 BS 时更新您的代码。
好的，最多七个短语，你说服了我。我将使用 make-xs-column 并手动创建媒体查询

【解决方案2】：

有点晚了，但是如果您注意到这些媒体查询中的最小宽度，那么如果它们与小列相同，则不需要制作中列和大列。如果它们与您的小列不同，您只需要指定中型和大型列。这就是您需要做的所有事情：

#logo {
   .make-sm-column(3);
}
#menu {
   .make-sm-column(5);
}

这将输出最少的代码来获得您想要的布局。

【讨论】：