How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Question

I am working on a Rails project that is just starting. We want to use twitter bootstrap as a base for our styles, at the beginning we would simply use bootstrap\'s class names d

Answer 1

Use @extend, but don't quote selectors:

.button { @extend .btn; }

Then you'll see that Sass extends related selectors too, like you want (.form-search .input-append .btn etc.).

… besides the bunch of extra selectors that will be added each time we extend a bootstrap class just to use a different name …

@extend works by copying selectors. If you don't want that, you can "extend" in HTML instead -- i.e. add Bootstrap's class names. :)