在LESS中的同一选择器中嵌套不同的类

Question

我有两个名为.style1和.style2的article选择器，

预期CSS输出：

.tiles article.style1 > .image:before {
background-color: #f2849e;
}
.tiles article.style2 > .image:before {
background-color: #7ecaf6;
}

我的尝试：

.tiles{
article{
.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}

.style2 {
> .image {
& ::before {
background-color: #7ecaf6;
}
}
}
}
}

我试着如上所示那样做，但我得到的CSS结果是：

.tiles article .style1 > .image ::before {
background-color: #f2849e;
}
.tiles article .style2 > .image ::before {
background-color: #7ecaf6;
}

在我看来，它将.style1和.style2类称为article的子类，而不是article选择器的标识符。你觉得我该怎么写？

Answer 1

您也可以将其写成：

.tiles {
article.style1 {
>.image {
&:before {
background-color: #f2849e;
}
}
}
article.style2 {
>.image {
&:before {
background-color: #7ecaf6;
}
}
}
}

Answer 2

使用&父选择器，如：

.tiles{
article{
&.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}

&.style2 {
> .image {
& ::before {
background-color: #7ecaf6;
}
}
}
}
}