Question

I am working on moving bootstrap css out of my code.

I want to build various classes I can call from my .css (actually .scss) file.

CSS and I have always trod different paths, but I am just learning it now.

I want to build something like this in a different css class:-

<div class="well span4">  

CSS

.datainput {  
well; span4  #<<<<this is where I get lost.  
}

Thanks

Answer 1

In Sass, classes are extended like this:

.datainput {
    @extend .well;
    @extend .span4;
}

Which would generate output that looks like this:

.well, .datainput {
    // styles here
}

.span4, .datainput {
    // styles here
}

If you’re using LESS, which is what TB was written in, it would look like this:

.datainput {
    .well;
    .span4;
}