Question

基本上，我希望能够循环创建断点，比如center-block- *类。

代码：

.centre-block {
    margin: 0 auto;
}

@breakpoints: xs 479px, sm 767px, md 991px, lg 1200px;

.make-classes(centre-block, @breakpoints);

.make-classes(@prefix, @list) {
    .iter(length(@list));

    .iter(@i) when (@i > 0) {
        .iter(@i - 1);

        @pair:  extract(@list, @i);
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2);

        @media (max-width: @value) {
            .@{prefix}-@{key} {
                .@{prefix};
            }
        }

    }
}

从那以后，我希望能够做的是添加一个类，比如说centre-block-sm，当屏幕大小低于768px时，.centre类margin: 0 auto将被应用。但我希望能够为许多类类型执行此操作，例如添加no-padding-*类列表。

除了不使用.@{prefix}这一事实外，一切都有效，而只是无法识别它。如果我将.@{prefix}替换为.centre-block则可行。有没有办法绕过这个问题，也许是解决问题的另一种方法？

我觉得这种功能是LESS的设计目标，所以我可能只是完全忽略了这一点。

Answer 1

使用Less，目前无法实现您的目标。您可以在this thread中找到这个问题。虽然在这方面没有太多解释，但你可以看到其中的其他链接线程（＃1133）提到此功能尚未实现。

您可以查看使用detached rulesets作为替代方案。在您的代码中，将顶级类选择器（.centre-block）转换为分离的规则集，将其存储为变量，然后将其作为一个参数传递给mixin。然后我们可以在mixin调用中调用这个规则集，它会将规则集的内容打印到我们需要的任何选择器中。以下是一个示例：

@centre-block : {margin: 0 auto;}; /* a detached ruleset */

@breakpoints: xs 479px, sm 767px, md 991px, lg 1200px;

.make-classes(centre-block, @breakpoints, @centre-block); /* pass the extra param */

.make-classes(@prefix, @list, @ruleset) { /* add the extra param */
    .iter(length(@list));

    .iter(@i) when (@i > 0) {
        .iter(@i - 1);

        @pair:  extract(@list, @i);
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2);

        @media (max-width: @value) {
            .@{prefix}-@{key} {
                @ruleset(); /* invoke the ruleset */
            }
        }

    }
}

是否可以从mixin函数参数混入？

1 个答案: