wrap a .less css definitions in a namespace

问题

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?

回答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.

Edit bootstrap.css / bootstrap-responsive.css

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

Recompile with less or use an online less compiler - http://winless.org/online-less-compiler
Edit the now-compiled file and change body {} CSS declarations to tb {}.
Use the new CSS file.
Place your "bootstrapped" content inside a <div class='tb'></div>

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

回答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

回答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.

回答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.

来源：https://stackoverflow.com/questions/8288463/wrap-a-less-css-definitions-in-a-namespace

标签

css

less