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?

score 23 · Answer 1 · edited May 31 '16 at 15:17

23

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>

edited May 31 '16 at 15:17

Ulf Gjerdingen

1,414
3
16
20

answered Jun 10 '12 at 18:26

Owen Allen

11,348
9
51
63

How would this prevent collisions in html, for example:
When another library has a class definition of 'large-button'? Prefixing is the only way to prevent namespace collisions on both ends. – TaylorMac Jul 22 '14 at 22:40
I had previously tried using by using all the .less files in the source code and recompiling with winless. However, something was missing in the final CSS file. I was able to correct it by following your procedure -- thanks! – BradByte Dec 16 '14 at 21:24
This worked for me. I followed the instructions under "Installing Grunt" at getbootstrap.com/getting-started. Once that was working, I followed this answer, recompiling with `grunt dist`. This way, I maintain CSS vendor prefixes. – Ryan H. Aug 20 '15 at 04:42

score 11 · Answer 2 · edited Jun 12 '14 at 11:12

11

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

edited Jun 12 '14 at 11:12

seemly

1,090
10
20

answered Nov 27 '11 at 19:51

FelipeAls

21,711
8
54
74

2

The problem is with `@import`. It doesn't work when using it in a namespace. – Martins Balodis Nov 27 '11 at 21:18
@MartinsBalodis The code for lib should be a LESS file (just add `#ns { .anything () {` at the beginning and two `}` at the end of your CSS lib. And the main file must also be a LESS file. The import should take place at the beginning outside `#my_div {}`. Nothing from the first file will be outputted without further instruction, so you can import it anywhere before this selector. Then the `#ns > .twitter;` instruction will finally add your code right where you want to. – FelipeAls Nov 27 '11 at 21:27
The twitter lib can only be imported. I cannot edit those files. They are used as git submodule. [Twitter modules main .less file](https://github.com/twitter/bootstrap/blob/master/lib/bootstrap.less) – Martins Balodis Nov 27 '11 at 22:05
1

Thanks! It worked!! For those making a first attempt, here is a fork with a modified makefile and notes for compiling: https://github.com/majgis/bootstrap/blob/master/notes.txt – Michael Allan Jackson Oct 16 '12 at 09:22
For anyone that just wants a quick file to work with, here is a compiled version of v2.2.2 using a ".tbs" namespace class. https://gist.github.com/4504997 – jkriddle Jan 10 '13 at 19:33

score 4 · Answer 3 · answered May 17 '12 at 12:32

4

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

answered May 17 '12 at 12:32

Randy

41
1

what's in the less/namespace.less file? – FLX Jan 23 '13 at 01:21
I tried this, but I can't use imported mixins from .twitter() – FLX Jan 23 '13 at 01:28
1

This doesn't work, you end up with selectors like: button.namespace .close {...} – Caqu Jul 08 '15 at 20:36

score 3 · Answer 4 · answered Feb 12 '13 at 03:43

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.

score 0 · Answer 5 · edited May 23 '17 at 11:52

0

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.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 09 '14 at 09:35

Geofrey Ssekirime

824
9
9

wrap a .less css definitions in a namespace

5 Answers5

Linked