Question

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

Answer 1

我认为最易维护的代码就是这样：

.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。）
干！=可维护。经常重复一个或两个班级，以便＃34; flat＆＃34;样式比编写臃肿杂乱的类层次结构好得多（通常对于这种情况，mixins和/或选择器插值比普通嵌套更好）。例如。而不是让它变得更容易修改（通常这是在DRY上过于沉重的唯一原因）想想你是否可以按照你永远不希望它被修改的方式来编写它。

如何从少数族裔儿童班内的祖父母申请条件

1 个答案: