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

The answers given by sam and tjklemz will help you resolve your immediate technical challenge, but it's possible to decouple your CSS and HTML even more. I'll give an example below, but keep in mind that this is just a quick example to demonstrate the power of mixins/extending CSS classes.

I'd also strongly recommend checking out the ZURB Foundation framework, as it is natively SASS, and designed with this style of development in mind.

For example:

    

        
My Company
        
My Tagline
    
    

        

            
Widget Title
            Widget Option 1
            Widget Option 2 
        
    
    

With the accompanying SCSS:

//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
    @extend .navbar;
}
#my-header h1 {
    @extend .branding;
}
#my-main {
    @extend .container;
}

//good example
.my-widget {
    @extend .well;
    @extend .hero-unit;
}
.my-widget a {
    @extend .btn;
}