如何在更少的情况下访问另一个范围中定义的变量？

Question

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

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

现在使用诸如@gray-lighter 之类的引导变量会报错：

.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 等，因此以这种方式使用它是非常值得怀疑的）。