Less 以较少的比例混合后不显示括号

我一直在尝试下面的mixin，但在编译时，translateY值的括号不会显示并留下空格

// Variables

@slide-up: slide-up;

@verticle: translateY;
@horizontal: translateX;

@positive: 20%;
@negative: -20%;
@zero: 0%;



.transition-slide-up { .transition-(@slide-up, @verticle); }

// Function
.transition-(@type, @axis: translateY(20%)) {

    animation-name: @type;
    -webkit-animation-name: @type; 

    animation-duration: 2s;   
    -webkit-animation-duration: 2s;

    transition-delay: 2s;
    -webkit-transition-delay: 2s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;   

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    opacity: 1;

    // Transitions
    @-webkit-keyframes @type {
        0% {
            transform: @axis(@positive);    
        } 
        100% {
            transform: @axis(@zero);
        }       
    }

    @keyframes @type {
        0% {
            -webkit-transform: @axis(@positive);    
        } 
        100% {
            -webkit-transform: @axis(@zero);
        }  
    }
}

这是我编译后得到的，括号缺失，请告知

.transition-slide-up {
    animation-name: slide-up;
    -webkit-animation-name: slide-up;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    opacity: 1;
}
@-webkit-keyframes slide-up {
    0% {
    transform: translateY 20%}
    100% {
    transform: translateY 0;
    }
}
@keyframes slide-up {
    0% {
    -webkit-transform: translateY 20%}
    100% {
    -webkit-transform: translateY 0;
}

---

不，不能像这样连接变量变量。变量不是宏。首先@a@b结果与@a@b的结果相同，仅次20%表示算术参数中的值，因此仅等于20%，而不是CSS函数参数列表。换句话说，如果需要将CSS函数名与CSS函数参数连接起来，则必须使用基于字符串的操作：transform:~@{axis}{@positive}；。对于这个特殊的片段，我可能会建议使用translate来代替，并设置vert。或者霍兹。由x 0或0 y的变量设置。还请注意，在代码中，默认的mixin参数@axis:translateY20%将导致无效CSS。