问题
I'm working on a less to sass conversion and have a few instances of classes on the html tag that I need to use to modify the styling of a particular class:
.shell {
width: 100%;
...
.medium-viewport & {
width: 800px;
.lt-ie8& {
width: 750px;
}
...
}
.wide-viewport & {
width: 950px;
...
}
...
}
I want to join the lt-ie8 class with the medium-viewport class:
.lt-ie8.medium-viewport .shell {width: 750px;}
Some of the files have a lot of rules in them for different conditions coming in on the html tag, mostly viewports and modernizr classes.
Since sass does not support having the & at the end with no space, I'm wondering what other workarounds I could use.
Obviously, I could change the rule block structure and hard code the .lt-ie8.medium-viewport .shell {} selector outside the .shell block but I'm seeing that as the least desirable option as it breaks file structure, and obviously repetitious.
Kind of frustrating since less supports it and its the only bump in the road I've hit so far in the file conversions. Any ideas?
来源:https://stackoverflow.com/questions/25130489/less-to-sass-ampersand-workaround