Question

为避免样式冲突，我将Bootstrap放在单独的命名空间中，如this answer中所述：

.bootstrap-styles {
  @import 'bootstrap';
}

现在使用诸如@gray-lighter之类的Bootstrap变量会出错：

.footer {
  // NameError: variable @gray-lighter is undefined in ...
  border-top: 1px solid @gray-lighter;
}

如何在less？

中访问在不同（非父）范围内定义的变量？

Answer 1

这样你就不能（见#1848）。如果命名空间只包含变量，您可以这样做：

.footer {
    .bootstrap-styles(); // copy that namespace into this scope
    border-top: 1px solid @gray-lighter;
}

但由于.bootstrap-styles也包含样式，因此它也会将所有样式放到.footer上。因此，如果您确实需要以命名空间方式重新使用BS变量，则需要从样式中单独导入它们，例如像这样：

.bootstrap-styles {
    @import 'bootstrap';
}

.bootstrap {
    @import (multiple) 'variables';
}

.footer {
    .bootstrap(); // using Bootstrap variables here
    border-top: 1px solid @gray-lighter;
}

---

另请注意，通过将整个bootstrap.less包装到命名空间中，您实际上会破坏其许多样式（请参阅#2052等，因此以这种方式使用它是非常值得怀疑的。）

如何以更少的方式访问另一个范围中定义的变量？

1 个答案:

---