在mixin之后没有显示括号

Question

我一直在尝试以下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;
}