遍历目录或列表中的文件

Question

我正在尝试为单个 .css 文件生成多个 CSS classes 以供页面的 body 元素用于更改页面的整个配色方案。

我有一个包含变量 @base00 到 @base0F 的 .less 文件文件夹，用于它们的特定配色方案 (https://github.com/AndrewBelt/hack.chat/tree/master/client/base16)，我想为每个 CSS class 名字.

这里有一些伪代码可以实现我的需要。

// This syntax does not exist in LESS
for each @scheme in ./base16/ {
    @import "@scheme"

    body.@{scheme} {
        background: @base00;
        color: @base07;
    }

    ...
}

对于这个，我可能不得不跳出框框思考，比如创建一个 Makefile 来构建，方法是通过命令行替换变量并将 LESS 生成的每个 .css 文件连接到一个 master .css 文件。但也许有一种使用纯 LESS 的更优雅的方法。

Answer 1

不，没有内置文件系统functions/features Less。（它设计用于多种环境，其中一些甚至不允许 "directory sniffing"）。如果有必要，可以编写一个插件来提供此类功能，但我想在这种情况下，在外部执行此操作会更容易。

编译和拼接多个文件并不是最简单的方法。例如，您可以简单地生成导入所有方案并将每个方案应用于主模板的 Less 文件，例如只是列表：

.scheme-name {
    @import "scheme-name";
    @import (multiple) "scheme-styles-template";
}

声明。其中 scheme-styles-template 与您的 scheme.less 相同，除了 body 定义为：

body& {
    background: @base00;
    color: @base05;
}

遍历目录或列表中的文件

Loop through files in a directory or a list

less