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

For being new to most of this, you're on the right track; the resources you've been reading are excellent. But, I think the concerns you have might not be justified:

...the button won't get the right style because sass will not apply that same rule to our custom class name...

In fact, I think you must be mistaken. According to the Sass documentation:

@extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears.

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works for the full code example.

Your original solution was actually correct. Use extends, but without the quotes:

.button {
  @extend .btn; //no quotes
}

I tested this using your example, and it works correctly. Sass copies all the selectors with ".btn" and on those newly created selectors, it replaces ".btn" with ".button".

Also, if Sass produces too much duplication for your liking, don't worry about it (so long as you are following best practices as pointed out by the links you posted). Duplicate code is easily compressed if the server uses gzip or the equivalent; the client shouldn't notice any slower loading times, although it might take slightly longer to "unzip" the CSS. As for CSS selector speed, don't worry about that either; the only case where speed matters for selectors is on the JavaScript side, particularly with jQuery. For your Sass code, simply follow best practices for maintainability (notably, modularization as you are trying to do, i.e. SMACSS) and you'll be good to go.