1

I tried just inheriting

@import "bootstrap.less";
.span2 { .col-md-2; }

but that gives me

Running "less:dev" (less) task
>> NameError: .col-md-2 is undefined in src\bs2compat.less on line 9, column 10:
>> 8
>> 9 .span2 { .col-md-2; }
>> 10

I'm guessing it has something to do with how Bootstrap defines the .col-__-X classes (https://github.com/twbs/bootstrap/blob/master/less/grid.less#L48 and https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L790), which I must honestly say I can't quite wrap my head around..

I'm preferably looking for ways that don't change the Bootstrap source code (so can avoid maintaining a private Bootstrap fork)..?

thebjorn
  • 26,297
  • 11
  • 96
  • 138
  • See http://stackoverflow.com/questions/17307137, i.e. use `.make-md-column(2)` instead. And yes, `.col-md-2` can't be used as mixin since they generate those via escaped strings concatenation. – seven-phases-max Mar 04 '14 at 19:17
  • 1
    Or see http://stackoverflow.com/questions/15552875/less-and-bootstrap-how-to-use-a-span3-or-spanx-any-number-class-as-a-mixin/15573240#15573240 – ScottS Mar 04 '14 at 19:20
  • Thank you both `.make-md-column(2)` did it, and now I also understand why my attempt at using `&:extend(..)` didn't work (I needed to create a concrete instance of `.col-md-2` to extend from). – thebjorn Mar 04 '14 at 19:31

1 Answers1

0

Based on the link from @seven-phases-max, here is a looping less construct that generates all .spanX and .offsetX classes:

.span(@index) when (@index >= 1) {
    .span@{index} {
        .make-md-column(@index);
    }
    .offset@{index} {
        .make-md-column-offset(@index);
    }
    .span(@index - 1);    // recurse
}
.span(12);
thebjorn
  • 26,297
  • 11
  • 96
  • 138