Avoiding multiple "#media" when using Bootstrap 3 less mixins - css

Question

When using less mixins to build a Website with Bootstrap I do something like this:
#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);
}
This looks very neat in the .less file but it does bloat up the compiled css a lot, isn't it?
Every class and id with such a mixin gets it's own set of media-queries:
#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%;
}
}
This gets repeated for every class/id with the column-mixin. I think it would be more elegant and more effective to combine these definitions in 3 media-query blocks.
Is there a way I can do this (semi-)automatically.
I am using Windows and compiling with WinLess at the moment, but havent found such an option.

Answer 1

There's .make-xs-column mixin in current Bootstrap version, it generates the same CSS without any media queries.

Answer 2

Little late, but if you note the min-width in those media queries, you don't need to make the medium and large columns if they're the same as the small. You only need to specify the medium and large columns if they're different than your small columns. This is all you need to do:
#logo {
.make-sm-column(3);
}
#menu {
.make-sm-column(5);
}
That will output the minimal amount of code to get your desired layout.