css - LESS 在 Map/List 中的列表中缺少值失败

Question

这个想法是在列表中添加一个“默认”值，如果存在，则输出一个类。如果“默认”不存在，则编译器将失败。如何做到这一点？

我尝试了一些 Less Guards 的变体，但找不到解决问题的方法。

我还尝试为这些情况添加一个“默认”列表，但它们没有合并。

当前较少我正在测试：

// Map / List
@borderRadius: {
    //default: .25rem;
    none: 0;
    small: .3rem;
    medium: .5rem;
    large: 1rem;
    round: 9999px;
}

// Extract
.getKeyFromList(@list, @key, @fallback...) {
    .-(length(@list));
    .-(@i) when (@i > 0) {.-((@i - 1))}
    .-(@i) when (@key = extract(extract(@list, @i), 1)) {
        @value: extract(@list, @i);
    }

    .--() {@value: @fallback} .--;
}

// Generate the CSS
& when not (@borderRadius) {
    .getKeyFromList(@borderRadius[default], @borderRadius[default]);

    &radius {
        border-radius: @value;
    }
}

编辑：这是我的真实示例。我正在尝试从每个中提取“响应”键，@@component以便为各个组件/变体动态生成响应修饰符类。我能够使 :hover 和 :focus 变体工作，但无法找到一种用于媒体查询的好方法（响应修饰符类）

@responsiveModifiers: true;
@breakpointOffset: 1;

@screens: {
    small: 768px;
    medium: 960px;
    large: 1440px;
};

@opacity: {
    0: 0;
    25: .25;
    50: .5;
    75: .75;
    100: 1;
}

@borderRadius: {
    none: 0;
    small: .3rem;
    medium: .5rem;
    large: 1rem;
    round: 9999px;
}

@components: {
    @opacity: {
        enabled: false;
        responsive: false;
        hover: true;
        focus: false;
    }
    @borderRadius: {
        enabled: true;
        responsive: false;
        hover: true;
        focus: false;
    }
}

.config() {

    // Create generators here
    & when (@components[@opacity][enabled]) {
        @component: opacity;
        .generate(opacity, opacity, @opacity);
    }

    & when (@components[@borderRadius][enabled]) {
        @component: opacity;
        .generate(radius, border-radius, @borderRadius);
    }

}

// Call the mixin for default, non media-query classes
// and prefix it with a period (.)
.groundwork-utility-classes() {
    @period: .;
    @{period} {
        .config();
    }
}

// Dynamically generate CSS responsive modifiers, per breakpoint,
// via the @screens list array
.groundwork-media-queries() when (@responsiveModifiers = true) {
    each(@screens, {
        @media screen and (min-width: (@value + @breakpointOffset)) {
            .@{key}&\: {
                .config();
            }
        }
    })
}

// Main mixin to generate all CSS utility classes
.generate(@className; @property; @list) {

    // Generate CSS classes from a @list array
    // e.g `.generate(p, padding, @padding);`
    each(@list, {
        & when not (@key > 0) {
            &@{className} {
                @{property}: @value;
            }
            &hover\:@{className}:hover when (@components[@@component][hover] = true) {
                @{property}: @value;
            }
            &focus\:@{className}:focus when (@components[@@component][focus] = true) {
                @{property}: @value;
            }
        }
    });
}

// Render non media-query classes together
.groundwork-utility-classes();

// Group and render media queries together,
.groundwork-media-queries();

标签： cssless