I have some less code using the & symbol. Here is what it looks like
.class1 {
.class2 {
& > &-item {
// Some rule
}
}
}
From looking online, it seems like this gets compiled to this in CSS
.class1 .class2 > .class1 .class2-item {
// Some rule
}
Here's my problem: I want to only have the & target the class2 and ignore the class1. So I'm looking for a way to compile the less to look like this
.class1 .class2 > .class2-item {
// Some rule
}
My code is a bit more complicated. In actuality, I am importing everything starting at class2 and wrapping it in class1 so I can't just remove the class1 selector. My actual code looks like this
.class1 {
@import 'other-style.less';
}
Since the code is imported, I can't remove the & selector.
Is there a way to make it so class1 doesn't get targetted with the & selector?