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

Nesting different classes in the same selector in LESS

我有 2 个 article 选择器,名称为 .style1.style2,

预期CSS输出:

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

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

我对 LESS 的尝试:

.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 选择器的标识符. 你觉得我应该怎么写?

使用 & parent selector 如:

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

也可以写成:

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