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
精彩评论