使用Bootstrap 3 less mixins时避免多个“@media”

Question

当使用较少的mixins来构建一个带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对每个class / id重复此操作。我认为在3个媒体查询块中组合这些定义会更优雅，更有效。

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

Answer 1

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

Answer 2

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

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

这将输出最少量的代码以获得所需的布局。