refactoring grid classes to be able to :extend them?

[maniqui]

This is a feature request for the not-so-distant future, when the upcoming new version of LESS (1.4.0) gets into its final shape.
Also, I understand the new grid system (and the mixin utilities that help to create it) on 3.0.0-wip is still a WIP, and still being overhauled.

The current way the grid system is dynamically created, using mixins (.generate-grid-columns() and .generate-grid-columns()) makes it impossible to :extend the bunch of classes (.col-sm-* and .col-lg-*).
One desirable advantage of :extending (over including mixins) is that the compiled output is far less bloated, as the original selectors are extended (ie. extending selectors are added as comma-separated selectors on the original rule). Compare that to including mixins, where a bunch of code is being duplicated on each include.

This would open the possibility of having another way of wring a cleaner (a.k.a "more semantic") HTML/CSS. I said "another way" because Bootstrap 3.0.0-wip currently provides
a way to work with semantic classes when using the grid system. But, precisely, this current way is the one using mixins as included, generating a more bloated code than the approach that uses ':extend'.

To be realistic, I'm not sure if this will be easily achievable in tandem the way the current Bootstrap grid system names its classes ((.col-*-[1...n]).
The limitation imposed by this way of naming classes is probably the explanation behind why other new (and innovative) grid systems, like csswizardry-grids and Unsemantic took a different approach for naming classes, using fractions and/or percentages, which are far more verbose and less readable (particularly when using them directly in class="" attribute).
In that sense, Bootstrap's class names for grid system are... neat.

Let's see if we can come up with a few ideas on how to take advantage of the upcoming ':extend' (and also silent classes and silent imports) on LESS 1.4.0.

Complementary reads:

• :extend to extend dynamically generated classes? less/less.js#1325
• http://stackoverflow.com/a/15573240

[maniqui]

Some possible workarounds or solutions to investigate:

• pre-compile your grid system, and then, copy the generated CSS (the list of rules using a .col-*-* selector) in a .less file that gets imported (ie. custom-grid.less). This is a somewhat acceptable solution on a project where the grid system is not going to change that often.
• in a similar fashion, if there could be a way to have 2 sets of .less files to be compiled, where the second set includes the output (compiled) files of the first set, to be treated (imported) as .less files too. In other words, you first compile the grid system (and probably, other common .less assets, like the whole Bootstrap), and then, you import those compiled assets in a second set of .less files (the project's .less files). Like if doing a "second pass".

[mdo]

For now we won't be changing anything, but I might try to improve the way we do our grid classes in v3. We'll revisit any of this after 1.4 lands and things have settled.