在Less中

Question

我需要这个CSS：

.class-1.class-a .target {
  background: red;
}

.class-1.class-b .target {
  background: blue;
}

我用这个Less

做得很好

.target {

  .class-1.class-a & {
    background: red;
  }

  .class-1.class-b & {
    background: blue;
  }
}

然而，我的LESS可以写得更简洁吗？两次写1级似乎是一种耻辱。我试过这个：

.target {

  .class-1 & {
    &.class-a {
      background: red;
    }

    &.class-b {
      background: blue;
    }
  }
}

还有这个：

.target {

  .class-1 & {
    .class-a & {
      background: red;
    }

    .class-b & {
      background: blue;
    }
  }
}

Answer 1

你的最后一次尝试非常接近，如果你修改它：

.target {
  .class-1 & {
    .class-a& {
      background: red;
    }
    .class-b& {
      background: blue;
    }
  }
}

它会起作用。

请注意，相同级别的类的顺序无关紧要，因此生成的.class-a.class-1 .target等于所需的.class-1.class-a .target

（我没有提到，尽管通常不惜任何代价避免重复的想法是有缺陷的。所有那些带有符号和括号的神秘链条使得代码完全不可读，如果与初始代码甚至纯CSS本身相比）。< / p>