Prefixing all selectors for twitter bootstrap in less

Question

I'd like to start learning Twitter Bootstrap and merging it into my site (starting with the form elements) but it breaks the rest of the site if I include it as is.

I'd like to prefix all of the selectors so that I can gradually add content that's bootstrap-styled like so: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

Because I'm only starting to learn, I don't really know what's possible with less. I have manually done the selector prefix but I'm curious if there would be a way to do this with less so that I can learn it by modifying bootstrap while still isolating it in a required bootstrap container.

For now, I have to add prefix in a second step after compiling the less files.

Thanks for any suggestions!

Answer 1

To avoid the problems mentioned in periklis's answer: create your own prefixed-bootstrap.less that re-compiles the compiled bootstrap.css in :

.bootstrap {
  @import (less) 'dist/css/bootstrap.css';
  @import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}

No need for sed commands then. The observations mentioned in Lars Nielsen's answer are of course still valid.