css - 如何避免重复选择器下的 LESS 嵌套？

Question

我正在尝试为一些遗留的 Bootstrap css 命名空间，直到我可以完全删除它。

大部分命名空间都在工作，但任何使用 .clearfix mixin 的内容都在 .legacy 类下嵌套了两次。

知道为什么会发生这种情况，或者如何避免这种情况？

//原始 index.less:

...
@import "../vendor/bootstrap/3.3.5/less/scaffolding.less";
@import "../vendor/bootstrap/3.3.5/less/type.less";
...

//更新了 index.less:

.legacy {
  ...
  @import "../vendor/bootstrap/3.3.5/less/scaffolding.less";
  @import "../vendor/bootstrap/3.3.5/less/type.less";
  ...
}

//预期输出:

...
.legacy h1 { ... }
.legacy .clearfix:before { ... }
.legacy .row:before { ... }
...

//实际输出:

...
.legacy h1 { ... }
.legacy .clearfix:before { ... }
.legacy .legacy .row:before { ... }
...

Answer 1

解决方法:

您可以通过导入编译的 CSS 并使用 (less) 标志将其视为 LESS 来避免这种情况:

.legacy {
  @import (less) "../vendor/bootstrap/3.3.5/dist/css/bootstrap.css";
}

说明:

您看到的有问题的双重嵌套实际上是预期的行为。

这是对正在发生的事情的非常简化的表示:

.legacy {
  // The clearfix mixin
  .clearfix() {
    color: red;
  }

  // Implementation of the mixin so that the class can be used
  .clearfix {
    .clearfix();
  }

  // Extend:
  .row {
    &:extend(.clearfix all);
  }
}

输出:

.legacy .clearfix,
.legacy .legacy .row {
  color: red;
}

如您所见，已实现简化的 .clearfix() 方法，.row 类使用语法 &:extend(.clearfix所有)。请务必注意，符号 & 是 LESS parent selector代表父选择器字符串。

换句话说，如果我们用父选择器替换&，它将是:

.legacy .row:extend(.clearfix all) {}

由于 .clearfix 嵌套在 .legacy 下，您将获得双重嵌套:

.legacy .legacy .row {
  color: red;
}

所有实现此混入的类都使用了 &:extend(.clearfix all)，这导致了您所看到的双重冗余嵌套。