从 LESS 中的值列表生成 CSS 类

Question

我有一个 LESS 循环，它生成不同的 CSS（增量）类，从列表中提取颜色值。

我目前的 LESS 代码如下：

.generate-detached(#f00, #0f0, #00f);

.generate-detached(@colors...) 
{
    .generate-detached-loop(1, @colors);
}

.generate-detached-loop(@i; @colors) when (@i <= length(@colors)) {
    @color: extract(@colors, @i);

    .detached-@{i} 
    {
        box-shadow: inset 0px 0px 8px 2px @color;

        > .toolbar > .drag-controls_container > .drag-control:before
        {
            box-shadow: inset 0px 0px 5px 1px @color;
        }
    }

    .generate-detached-loop((@i + 1), @colors);
}

生成的 CSS 代码为：

.detached-1 {
    box-shadow: inset 0px 0px 8px 2px #f00;
}
.detached-1 > .toolbar > .drag-controls_container > .drag-control:before {
    box-shadow: inset 0px 0px 5px 1px #f00;
}
.detached-2 {
    box-shadow: inset 0px 0px 8px 2px #0f0;
}
.detached-2 > .toolbar > .drag-controls_container > .drag-control:before {
    box-shadow: inset 0px 0px 5px 1px #0f0;
}
.detached-3 {
    box-shadow: inset 0px 0px 8px 2px #00f;
}
.detached-3 > .toolbar > .drag-controls_container > .drag-control:before {
    box-shadow: inset 0px 0px 5px 1px #00f;
}

也许我正在使用旧的 LESS 结构并且实际上存在一些新技术或一般来说......您有什么想法来改进解决方案吗？

Answer 1

更多的是关于您对现有语言特征的知识和理解，而不是语言特征本身。

即即使在 Less v2（您可能正在使用）中，也很难证明您那里存在 4 行额外的 .generate-detached(@colors...) mixin。

例如为什么不：

@detached-colors: #f00 #0f0 #00f;

.detached-loop(@i: length(@detached-colors)) when (@i > 0) {
    .detached-loop(@i - 1);
    .detached-@{i} {
        @c: extract(@detached-colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
} .detached-loop;

或：

.make-detached(#f00 #0f0 #00f);
.make-detached(@colors, @i: length(@colors)) when (@i > 0) {
    .make-detached(@colors, @i - 1);
    .detached-@{i} {
        @c: extract(@colors, @i);
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}

?

---

Less v3 有each 功能：

each(#f00 #0f0 #00f, {
    .detached-@{index} {
        box-shadow: inset 0px 0px 8px 2px @value;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @value;
        }
    }
});

---

但对于作为插件的 Less v2 也存在类似的情况：

.for-each(@c, @i in @l: #f00 #0f0 #00f) {
    .detached-@{i} {
        box-shadow: inset 0px 0px 8px 2px @c;
        > .toolbar > .drag-controls_container > .drag-control:before {
            box-shadow: inset 0px 0px 5px 1px @c;
        }
    }
}