Question

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?

Answer 1

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