Problems with "bootstrap.less" namespacing.

[GregLancaster71]

I have spent the last several hours reading, and googling how to accomplish this. My only goal is to @import four files containing mixins. However, they are borrowed and repurposed from bootstraps grid system so I need them namespaced. Why is this damn near impossible to do?

Can someone help me out here? Even a decent, in depth tutorial link on scoping would be great. I mean seriously, several hours just trying to import some damn mixins and variables? I see bootstrap imports mixins without any issue - but they dont use any name spacing.

[matthew-dean]

You mean as in:

#mynamespace {
  .mixin() {
    foo: bar;
  }
}
.demo {
  #mynamespace.mixin();
}

Like that?

[GregLancaster71]

I tried something almost exactly like that but without the foo: bar: what
would that be representing? A variable? I need to import these four
files, and then call the mixins.

I should be more clear. I have four files I import into one file. That one file is then imported into my primary less file. From that I am attempting to access these mixins.

Thanks for the reply too, feel like I'm losing my head here.

On Friday, April 3, 2015, Matthew Dean [email protected] wrote:

You mean as in:

#mynamespace {
.mixin() {
foo: bar;
}
}.demo {
#mynamespace.mixin();
}

Like that?

—
Reply to this email directly or view it on GitHub
#2535 (comment).

[matthew-dean]

foo: bar is representing a property and value, as in color: green.

[GregLancaster71]

I am trying to namespace using imports. Like:

#mynamespace {
    @import: 'grid.less';
    @import: 'grid-framework.less';
    @import: 'mixins.less';
    @import: 'variables.less';
}
.demo {
  #mynamespace.make-row();
}

Is that something that is possible?

[seven-phases-max]

Your mistake is in : after import - these statements define variables named import not really importing files (doh! I guess we should put warning there even if it's absolutely valid Less statement (I saw this @import: typo problem twice today :)).

[seven-phases-max]

Either way when you fix this : error you still will face certain problems (assuming these files are from Bootstrap) since Bootstrap uses certain code snippets not compatible with such kind of namespacing (in other words, it is not supposed to be used like this and they officially do not support such usage), for more details on particular problems see:

• Mixin duplicates selector in Bootstrap (probable less issue) #2052 (comment)
• Add feature to use base class #1709 (comment)

Though just #mynamespace.make-row(); will work fine.
(But the files you need to import may differ depending on the Bootstrap version: for example with v3.2.0 I've just tried you also need utilities.less for the .clearfix class.)

[GregLancaster71]

That was actually a typo. The code you provided did work, but only for one mixin. The second returned this upon compiling:
No matching definition was found for.

I thought I could namespace it for use like #mynamespace.make-row();. I feel like I'm taking crazy pills! Maybe i have been looking at the screen to long. Literally, all I am trying to do is import the bootstrap /mixins/grid.less file and keep it namespaced. :-/ Thank you for your help seven-phases-max, I dont think theres a solution immediately available.

[seven-phases-max]

Closing this as not an issue (and if it would it's a duplicate of #2052).

• For "how-to"/"help-me-with" kind of questions the better place to ask is SO.