LESS CSS - возврат переменной условно - PullRequest
0 голосов
/ 22 февраля 2019

Я использую LESS CSS и уже использую функциональность 'return'.

.get-theme-color(@theme) {
    @return: ~"@{mdc-theme-@{theme}}";
}

И использую его для присвоения значений следующим образом:

@var: .get-theme-color(primary)[];

Однако я пытаюсьвернуть значение выборочно, используя миксин.Я пробовал различные форматы - это то, что я сейчас пытаюсь сделать работу - безуспешно:

.get-property-box(@mask) when (length(@mask) >= 1) and (length(@mask) =< 4) {
    @mask-len: length(@mask);

    @val1: extract(@mask, 1);
    @value: ~"@{val1}";

    & when (@mask-len = 2) {
        @val2: extract(@mask, 2);
        @value: ~"@{val1} @{val2}";
    }
    & when (@mask-len = 3) {
        @val2: extract(@mask, 2);
        @val3: extract(@mask, 3);
        @value: ~"@{val1} @{val2} @{val3}";
    }
    & when (@mask-len = 4) {
        @val2: extract(@mask, 2);
        @val3: extract(@mask, 3);
        @val4: extract(@mask, 4);
        @value: ~"@{val1} @{val2} @{val3} @{val4}";
    }

    @return: @value;
}

Вот альтернативная версия:

.get-property-box(@mask) when (length(@mask) >= 1) and (length(@mask) =< 4) {
    @mask-len: length(@mask);

    @val1: extract(@mask, 1);
    @return: ~"@{val1}";

    & when (@mask-len = 2) {
        @val2: extract(@mask, 2);
        @return: ~"@{val1} @{val2}";
    }
    & when (@mask-len = 3) {
        @val2: extract(@mask, 2);
        @val3: extract(@mask, 3);
        @return: ~"@{val1} @{val2} @{val3}";
    }
    & when (@mask-len = 4) {
        @val2: extract(@mask, 2);
        @val3: extract(@mask, 3);
        @val4: extract(@mask, 4);
        @return: ~"@{val1} @{val2} @{val3} @{val4}";
    }
}

И назовите это какэто:

.mdc-shape(round) {
    @mask: 4rem, 5rem;
    border-radius: .get-property-box(@mask)[];
}

Вывод:

border-radius: 4rem;

Я знаю, что охранники работают правильно (соответствующий раздел достигнут), но возвращаемое значение не обновляется.

Кто-нибудь получил совет о том, как я могу сделать эту работу?

...