МЕНЬШЕ терпит неудачу при пропущенном значении из списка в Map / List - PullRequest
Новая
       17

МЕНЬШЕ терпит неудачу при пропущенном значении из списка в Map / List

0 голосов
/ 25 мая 2019

Идея состоит в том, чтобы добавить значение «по умолчанию» в список и, если оно существует, вывести класс.Если «default» не существует, произойдет сбой компилятора.Как этого достичь?

Я попробовал несколько вариантов 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();
...