更少：动态提取列表中的键

Question

我在“不太喜欢”中有一个列表：

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

我想动态地提取responsive键，并将其应用于媒体查询mixin，并仅生成启用了responsive: true;的那些实用程序类。我能够使用:hover和:focus变体来工作，但是找不到解决媒体查询（响应修饰符类）的好方法。这是当前可以正常工作的完整Less：

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

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

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

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

.config() {

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

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

}

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

// Dynamically generate CSS responsive modifiers, per breakpoint,
// via the @screens list array
.-media-queries() {
    each(@screens, {
        @media screen and (min-width: (@value)) {
            .@{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]) {
                @{property}: @value;
            }
            &focus\:@{className}:focus when (@components[@@component][focus]) {
                @{property}: @value;
            }
        }
    });
}

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

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