Prefixing all selectors for twitter bootstrap in less

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!

Solution 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.

Solution 2:

You can edit the file bootstrap.less and encapsulate everything in something like this:

.bootstrap {
    // CSS Reset
    @import "reset.less";

    // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc

    [...]

}

Update:

Since bootstrap files uses the less & operator, e.g:

// list-group.less (bootstrap 3.0.0)
.list-group-item {
    [...]
    a& {
        [...]
    }
}

The compilation of the above code will end up with rules that are semantically wrong and aren't prefixed with .bootstrap:

a.bootstrap .list-group-item {
  color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
  color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
  text-decoration: none;
  background-color: #ecf0f1;
}

In order to fix that use the following to compile bootstrap:

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css

Now the above lines will be compiled to:

.bootstrap a .list-group-item {
  color: #555555;
}
.bootstrap a .list-group-item .list-group-item-heading {
  color: #333333;
}
.bootstrap a .list-group-item:hover,
.bootstrap a .list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}