Question

我使用LESS CSS，并且已经使用了“返回”功能。

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

并使用它来分配值：

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

但是，我试图使用mixin有选择地返回一个值。我尝试了各种格式-这是我目前正在尝试的工作-没有成功：

.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;

我知道防护装置工作正常（已到达相关部分），但返回值未更新。

有人对我如何进行这项工作有任何建议吗？

更少的CSS-有条件地返回变量

0 个答案: