css - Jasny-Bootstrap 在 lessfile 中使用 ".offcanvas-sm"

Question

我想使用 .offcanvas-sm分配给 <nav>元素放入 Less 文件中。 Less 文件如下所示:

@import "../../jasny-bootstrap.less";
.test {
  .offcanvas-sm;
}

问题是 Less 处理器说 - class offcanvas-sm不存在。它来自这个“https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less”，包含在“jasny-bootstrap.less”中的 Less 文件。但是我怎样才能将这段代码导入到一个类中呢？

Answer 1

那里的编译器是正确的，确实 .offcanvas-sm 在您尝试调用它的上下文中不存在。这里的关键词是范围:媒体查询中定义的选择器只能在同一媒体查询 block 中用作混合。

对于这个特殊案例 extend会成功的。 extend 的作用域处理在某种程度上与 mixin 的作用域正交，因此在媒体查询 block 中定义的选择器可以从外部作用域“扩展”(但不是相反):

.test {
    &:extend(.offcanvas-sm all);
}

或者只是:

.test:extend(.offcanvas-sm all) {

}

---

all在这种情况下关键字是必需的，因为 .offcanvas-sm 样式实际上是一组两个规则集:.offcanvas-sm 和 .offcanvas-sm.in