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;
}

Answer 3

This is how I have done it. This takes place in the root of the bootstrap folder that is downloaded, or cloned from git.

## ./less/namespace.css (New file)

#ns {
  .twitter() {
    @import "less/bootstrap.less";
  }
}

## ./style.less

@import "less/namespace.less";

.namespace {
  #ns > .twitter;
}

Then run less style.less > style.css

Answer 4

Here is how I did it, based on majgis's github fork above:

bootstrap-ns.less:

@import "namespace.less"
.bs {
    #ns > .twitter;
    }

namespace.less:

#ns {
  .twitter(){
    @import "bootstrap.less";
  }
}

You then reference bootstrap-ns.less in your html page. This was tested with dotLESS.

Answer 5

if you have control over the compilation parameters just set strictImports to false and work as you intended to everything should be fine. consider looking at less-strictimports or at this issue.