我正在尝试为一些遗留的 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 { ... }
...
最佳答案
解决方法:
您可以通过导入编译的 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)
,这导致了您所看到的双重冗余嵌套。
关于css - 如何避免重复选择器下的 LESS 嵌套?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42031860/