Less nested namespaces?

So I have this bit of Less

#footer {
    ul {
        // stuff
    }
    li {
        // stuff
    }
}

everything is contained nicely within #footer, but say I want to prefix #footer. How would I prefix footer with a class like .ie6 or .ie7, but within the less "closure" of #footer?

for example, I want to do this (observe pseudo syntax >.ie6, >.ie7) :

#footer {
    <.ie6, <.ie7 {
        // ie6开发者_如何学编程/7 stuff
    }
    ul {
        // stuff
    }
    li {
        // stuff
    }
}

and have it generate this:

.ie6 #footer,
.ie7 #footer {}

#footer {}
#footer ul {}
#footer li {}

Any idea how to accomplish this with Less?

I think this might be of interest to you: https://github.com/cloudhead/less.js/pull/268#issuecomment-1207479

What you want to do isn't possible yet in the master less.js. But a guy, James Foster, forked it and added this feature.

Example:

#box {
    #other-box {
        margin: 10px 0 0;

        .ie7 & {
            margin: 5px 0 0;
        }
    }
}

I don't believe it's possible to place the class before the #footer, unless you wrapped everything in .ie6/7 instead of #footer

LESS website shows the following example:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Which I think is the only way to achieve similar to what you want, so:

    #footer {
    .ie6{
        // ie6 stuff
    }
    .ie7{
       //ie7 stuff
    }
    ul {
        // stuff
    }
    li {
        // stuff
    }
    }

Would generate with the classes after the ID, I can't seem to find a way to achieve what you want without nesting everything inside the .ie6/7