Twitter Bootstrap Rails: How to write semantic HTML by reusing classes?

Question

So I installed the twitter-bootstrap-rails gem. I ran the generator to create a bootstrap_and_overrides.css.less file. Now I would like to write some semantic HTML. So instead of writing:

<div class="container">
  <div class="row">
    <div class="span2">Column1</div>
    <div class="span6">Column2</div>
  </div>
</div>

I want to be able to write:

<div id="foo-wrapper">
  <div class="foo">
    <div class="foo-left">Column1</div>
    <div class="foo-right">Column2</div>
  </div>
</div>

However, when I try to write the less for this, the classes are not applied:

// at the bottom of bootstrap_and_overrides.css.less
#foo-wrapper {
  .container;
}

What am I doing wrong? Is this not supported? Am I defining my styles in the wrong place? Am I using the wrong gem for working with Twitter Bootstrap?

Update:

Here is the comment in the bootstrap_and_overrides.css.less:

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here

For some reason, it doesn't seem like I have access to the mixins and I don't understand why.

Answer 1

It looks like you want a SASS feature named "selector inheritance"

It lets you extend a class with another class

.bordered {      
  border: 1px solid back; 
} 
#menu a {                   
  @extend .bordered;      
}  

Would produce:

.bordered, #menu a {
border: 1px solid back; }

Comparison of LESS and SASS

So you could move to a sass implementation of bootstrap, and then do exactly what you want. https://github.com/thomas-mcdonald/bootstrap-sass)

Answer 2

You should double check Bootstrap's mixins. Instead you'll want something like

#container {
    .center-block();
}

.foo-wrapper {
    .makeRow();
}

.foo-left {
    .makeColumn(8,0);
}

.foo-right {
    .makeColumn(4,0);
}

which the mixins to fill in those special Bootstrap classes.

Answer 3

I'm using https://github.com/thomas-mcdonald/bootstrap-sass with Compass and it works fine.

just like @Jesse Wolgamott said, the "selector inheritance" feature!

or you could check this out: How to reuse a class in sass without using a mixin?

and this issue is common when reusing span*:
How to use twitter bootstrap with bootstrap-sass in rails app?