wrap a .less css definitions in a namespace

Question

I wanted to use twitter bootstrap CSS only in a specific element in my web page.

I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved @import outside #my_div then I got all css definitions for twitter boostrap.

#my_div {
    @import "../twitter_bootstrap/lib/bootstrap.less";
}

How can I namespace a less css file?

Answer 1

I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.

1. Edit bootstrap.css / bootstrap-responsive.css

   .tb {   // copy/paste the entire bootstrap.css } 

2. Recompile with less or use an online less compiler - http://winless.org/online-less-compiler

3. Edit the now-compiled file and change body {} CSS declarations to tb {}.

4. Use the new CSS file.

5. Place your "bootstrapped" content inside a <div class='tb'></div>

Answer 2

LESS documentation has a section about namespaces.

So you could define your lib in a separate document:

#ns {
  .twitter () {
    // Instructions to be used later
    // Nothing will appear in compiled CSS except if called later (because of parenthesis)
  }
}

import this file at the beginning of the CSS file to be compiled and use these instructions:

#my_div {
  #ns > .twitter;
}