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

Question

我试图命名一些遗留引导程序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 all).值得注意的是,&符号&是一个LESS父选择器,表示父选择器字符串.

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

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

由于.clearfix嵌套在下.legacy,你会得到双嵌套:

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

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