LESS CSS - интерполяция по отображенным переменным - PullRequest
Новая
       12

LESS CSS - интерполяция по отображенным переменным

0 голосов
/ 20 марта 2019

Я пытаюсь автоматизировать сценарий с вложенной картой, используя LESS CSS.

Рассмотрим следующую одноуровневую карту: 

    .map(@keys) {
        each(@keys, {
            @{value} : @index;
        });
    }

Называется примерно так: 

.render-maps() {
    @arr: child1, child2, child3;

    @text-colors: {
        @map(@arr);
    }
}

Это прекрасно работает для одноуровневых карт, где выводом является простой ключ и значение, однако я хочу создать карту второго уровня - как показано ниже - но я не могу заставить ее скомпилировать: 

.nested-map(@arr1, @arr2) {
    each(@arr1, {
        // I cannot get the compiler to output with a prefix '@' on parent!!!
        @parent@{index} : { 
            each(@arr2, {
                @{value} : @index;
            });
        }
    });
}

Можно ли это сделать? Если да, то любой совет приветствуется.

UPDATE

Вот что я пытаюсь достичь, на случай, если есть лучшее решение:

У меня есть несколько базовых цветов, они хранятся в темах как переменные. 

@primary: #000000;

Для каждого базового цвета может существовать контрастный «включенный» цвет - представляющий текст и т. Д. 

@on-primary: #ffffff;

Для каждого цвета "включено" может быть несколько категорий - текст, значки, границы.

... и для каждой категории может быть несколько состояний, и каждое состояние использует различную непрозрачность.

Например,

значки имеют 3 состояния - активное, неактивное, отключенное - каждое с разной непрозрачностью, но с одним и тем же цветом «вкл».

Вы можете выбрать размещение значков на фоне или на цветной поверхности, чтобы также было несколько тем.

Подводя итог, могут существовать сотни различных перестановок, которые я не хочу поддерживать индивидуально как переменные.

Вместо этого я создаю ряд ключевых переменных / списков и миксинов, чтобы можно было генерировать все варианты. 

@primary: #000000; // 10 of these
@on-primary: #ffffff;
@icon-variants: active, inactive, disabled;
@icon-opacity-on-primary: 70, 50, 38;

Однажды у меня есть все мои варианты, я получаю цвета через миксин. Вот пример одноуровневой карты для цветов. 

.get-color(@color) {
    @colors: {
        .map-colors();
    }
    @return: color(@colors[$@color]);
}

Подход такого типа означает, что мне нужно знать только тему «основной», из которой я могу получить правильные «включенные» цвета и любые варианты текста, значков, рамок и любое состояние любого варианта иска. просто горстка миксинов.

Например: .get-text-color(high-emphasis, on-primary)[];

Вот как я должен наносить на карту 2 уровня, потому что я не могу сделать это автоматически: 

.get-text-color(@theme; @type: high) {
    @text-colors: {
        @on-primary: { .map-text-color(on-primary); }
        @on-primary-dark: { .map-text-color(on-primary-dark); }
        @on-primary-light: { .map-text-color(on-primary-light); }
        @on-secondary: { .map-text-color(on-secondary); }
        @on-error: { .map-text-color(on-error); }
        @on-surface: { .map-text-color(on-surface); }
        @on-background: { .map-text-color(on-background); }
        @on-light: { .map-text-color(on-light); }
        @on-dark: { .map-text-color(on-dark); }
    }
    @return: color(@text-colors[@@theme][$@type]);
}

В результате получается 30 цветов - 10 х 3 состояния.

...