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

解决方法

你也可以写成：

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

,

像这样使用 & parent selector：

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