Question

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

我有一个包含变量@base00到@base0F的.less文件的文件夹，用于它们的特定颜色方案（https://github.com/AndrewBelt/hack.chat/tree/master/client/base16），并希望为每个CSS类名导入这些文件中的每一个

这里有一些伪造的代码来实现我的需要。

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

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

    ...
}

我可能不得不在这个框外思考，比如通过命令行替换变量来创建Makefile来构建，并将LESS生成的每个.css文件连接到单个主.css文件。但也许使用纯粹的LESS有更优雅的方式。

Answer 1

不，没有内置的文件系统功能/功能。（它设计用于在多种环境中工作，其中一些甚至不允许＆＃34;目录嗅探＆＃34;）。如果有必要，可以编写一个插件来提供这样的功能，但我想在这种情况下，从外部执行此操作会更容易。

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

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

语句。 scheme-styles-template除body以外的body& { background: @base00; color: @base05; }与$('#example3').dataTable({ "sDom": "<'row'<'col-md-6'l <'toolbar'>><'col-md-6'f>r>t<'row'<'col-md-12'p i>>", "oTableTools": { "aButtons": [ { "sExtends": "collection", "sButtonText": "<i class='fa fa-cloud-download'></i>", "aButtons": [ "csv", "xls", "pdf", "copy"] } ] }, "aoColumnDefs": [ { "bSortable": true, "aTargets": [ 0] } ], "aaSorting": true, "oLanguage": { "sLengthMenu": "_MENU_ ", "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries" }, "aLengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]], "iDisplayLength": 25 });相同的地方：

$("div.toolbar").html('<div class="table-tools-actions"><a href="add" class="btn btn-primary" style="margin-left:12px; background:#5aceff;" id="test2"><i class="fa fa-plus"></i> Add </a></div>');

循环遍历目录或列表中的文件

1 个答案: