html - 如何从Less的子类中向祖 parent 施加条件

<div class="grandParent active"> /*active class added dynamically*/
   <div class="parent1">
    <div class="childOfParent1">  Some Text  </div>
   </div>
   <div class="parent2">
     <div class="childOfParent2">  Some Text  </div>
   </div>
</div>

使用Less，我如何根据grandParent类应用子文本颜色

.grandParent {
  .parent1 {
    .childOfParent1 {
      color : red;
      .grandParent:not(active) .parent1 .childOfParent1 {
        color : green;
      }
    }
  }
}

以上可能使用以下代码，但我不想重复该代码

.grandParent {
  .parent1 {
    .childOfParent1 {
      color : red;
    }
  }
  &:not(active) .parent1 .childOfParent1 {
      color : green;
  }
}

最佳答案

我猜最容易维护的代码是这样的：

.parent {
    .child {
        color: green;
        .grandParent.active & {color: red}
    }
}

或更少的DRY（如果您真的想使用:not）：

.parent {
    .child {
        .grandParent              & {color: red}
        .grandParent:not(.active) & {color: green}
    }
}

有关此类&用法的更多详细信息，请参见Changing selector order。



在下面的评论之后，这是另一个变体：

.grandParent {
    .parent {
        .child {
            color: green;
            .active& {color: red}
        }
    }
}

[嗯，有点题外话]
虽然如果真的考虑到要使其保持可维护性，则有一些注意事项：


避免使用过于具体的选择器（因此对于本示例，我认为.grandParent或.parent实际上是多余的）。
切勿为了嵌套而嵌套。有时嵌套是好的，但有时却非常难看（请参见this nice brief answer，这是出于从不盲目进行的众多原因中的一些原因）。
DRY！=可维护。通常，为“扁平”样式重复一两个类要比编写a肿且混乱的类层次结构好得多（通常，在这种情况下，mixin和/或选择器插值比普通嵌套更好）。例如。与其使它变得更易于修改（通常这是过于沉迷于DRY的唯一原因），不如以一种您永远不会希望对其进行修改的方式编写它。