Jasny-Bootstrap 在lessfile 中使用“.offcanvas-sm”

【问题标题】：Jasny-Bootstrap using ".offcanvas-sm" in lessfileJasny-Bootstrap 在lessfile 中使用“.offcanvas-sm”
【发布时间】：2014-11-20 02:16:06
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

对于这种特殊情况，extend 可以解决问题。 extend 的作用域处理与 mixins 的作用域有些正交，因此媒体查询块中定义的选择器可以从外部作用域“扩展”（但不是相反）：

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

或者只是：

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

}

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

【讨论】：