以较少的混合导入动态路径

Question

我正在重写我的Less css结构，使其更具可伸缩性。我正在寻找一个架构，为每个模板的每个媒体查询加载一个模板。

最好，我想把它加载到一个混入中。当前混入如下所示(但不支持特定组件加载)`

/**
 * Progressive enhancing overrides (mobile first)
 *
 * Mobile loads "mobile.less"
 * Wide mobile loads "mobile.less" and "widemobile.less"
 * Tablet loads "mobile.less", "widemobile.less" and "tablet.less"
 * etc.
 */
.progressive-enhancement() {
  // Mobile layout
  @media only screen {
    @import (less) "../template/mobile";
  }

  (...)
}

所以我要找的东西是这样的(不能工作)：

.progressive-enhancement(@component: main) {
  // Mobile layout
  @media only screen {
    @import (less) "../template/@{component}/mobile";
  }

  (...)
}

然而，这并不起作用，导致一个错误，声明@component是未定义的。

我认为问题在于，在调用混合之前，Less尝试进行导入，而不是在那个阶段定义@component。

有没有办法通过mixin提供的变量动态地使用@import？

提前谢谢。

Answer 1

是的，这是不可能的。是的，这是因为Less必须以特定的“类型”顺序而不是“自上而下”的顺序计算语言实体(大致是imports -> mixins ->变量等)。由于惰性评估原则(有一些内部解决方案可以处理某些特定的事情，但有一个例外，但这些例外永远不会是任何东西，除了杂乱无章)。

对于您的特定用例，乍一看最简单的解决方法是使用导入而不是混合，并让组件指定自己的名称：

// progressive-enhancement.less:

@media only screen {
    @import "@{component}/mobile";
}

// etc.

然后为每个组件提供其“根”文件：

// ../template/button.less:
& {
    @component: button;
    @import (multiple) "progressive-enhancement.less";
}

。

// ../template/toolbar.less:
& {
    @component: toolbar;
    @import (multiple) "progressive-enhancement.less";
}

等。

最后，在您的主文件中，您只需按常规导入这些文件：

// main.less:
@import "../template/button";
@import "../template/toolbar";

(很明显，文件名和它们的实际位置将根据您的喜好进行调整)。

Answer 2

我正在回答我自己的问题，这样我就可以使用一些格式来显示我的解决方法。

我有这样的目录结构：

less/
- components/
  - navbar/
    - mobile.less
    - tablet.less
  (...)
- config/
  - defaults.less
- lib/
  - grid.less
  - mediaqueries.less
  (...) 
- template/
  - base.less
  - mobile.less
  - widemobile.less
  - tablet.less
  (...)
- main.less

main.less文件导入所需的库(例如mediaqueries.less)。它们提供了混合使用(例如，.渐进式增强())。mediaqueries库有多个负责模板加载的混入。请参阅文档块：

/**
 * Progressive enhancing overrides (mobile first)
 *
 * Mobile loads "mobile.less"
 * Wide mobile loads "mobile.less" and "widemobile.less"
 * Tablet loads "mobile.less", "widemobile.less" and "tablet.less"
 * etc.
 */

此外，main.less还包括用于常见样式、字体加载、自定义混合等的template/base.less。

因为mediaqueries库不可能很好地处理组件。这个逻辑被移到了他们的文件。例如: mobile.less：

(...)
/**
 * Imports
 */
@import (less) "../components/navbar/mobile.less";
@import (less) "../components/postslist/mobile.less";
@import (less) "../components/footer/mobile.less";
(...)

每当我需要覆盖某个媒体查询的规则时，可以对其他文件进行额外的导入(不幸的是，不能自动加载)。例如，tablet.less

(...)
/**
 * Imports
 */
@import (less) "../components/navbar/tablet.less";
@import (less) "../components/postslist/tablet.less";

注意，移动端的页脚是不变的。

这个解决方案可能比@seven-phases-max提供的解决方案更冗长，但我认为它更清晰，因为变量不需要被滥用为参数。