Question

我正在尝试命名一些传统的bootstrap css，直到我完全删除它为止。

大多数命名空间都有效，但使用.clearfix mixin的任何内容都在.legacy类下嵌套了两次。

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

// original 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 all)扩展它。请注意，＆符号&是LESS parent selector，表示父选择器字符串，这一点非常重要。

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

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

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

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

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

如何避免在重复选择器下进行LESS嵌套？

1 个答案:

解决方法：

阐释：