时间戳

首页 > 解决方案 > 从 LESS 中的值列表生成 CSS 类

less - 从 LESS 中的值列表生成 CSS 类

问题描述

我有一个 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 结构并且实际上存在一些新技术或者一般来说......你有什么想法来改进解决方案吗？

标签： lessless-mixins

解决方案

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

即即使在Less v2（你可能正在使用）中，也很难证明.generate-detached(@colors...)你那里有4行额外的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;
        }
    }
}

推荐阅读