如何从Less的子类中向祖父母施加条件

debugcn 发表于 Dev

菌

<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}
    }
}

有关此类用法的更多详细信息，请参见更改选择器顺序&。

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

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

[嗯，有点题外话]尽管确实要使其保持可维护性，但有一些注意事项：

避免过于具体的选择（因此，对于这个例子，我想无论是.grandParent或.parent冗余实际上）。
切勿为了嵌套而嵌套。有时嵌套是好的，但有时却是非常丑陋的（请参阅以下简短的简要回答，这是出于从不盲目进行的众多原因中的几个原因）。
DRY！=可维护。通常，为“扁平”样式重复一两个类要比编写a肿且混乱的类层次结构要好得多（通常，在这种情况下，mixins和/或选择器插值比普通嵌套更好）。例如，与其让它变得更容易修改（通常这是过于沉迷于DRY的唯一原因），不如考虑以完全不希望对其进行修改的方式来编写它。