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.

I'm insterested in something like this because I thought to do something very similar but using SASS' Selector Inheritance (with `@extend`) I'm wondering if it was a good idea because of a similar behaviour when I tried (CSS' rules was overridden somehow and then nothing happened). Are the `#foo-wrapper`'s rules overridden in Firebug? — Aldo 'xoen' Giambelluca, May 31 '12 at 22:55

score 2 · Answer 1 · answered Jun 01 '12 at 02:03

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)

score 2 · Answer 2 · answered Jul 17 '12 at 19:10

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.

answered Jul 17 '12 at 19:10

kweerious

1,356
1
11
16

Ah, this makes a lot of sense now. – Andrew Jul 18 '12 at 00:06

score 1 · Answer 3 · edited May 23 '17 at 11:56

1

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?

edited May 23 '17 at 11:56

Community

1
1

answered Nov 13 '12 at 03:11

zx1986

880
2
12
18

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

Update:

3 Answers3