如何简化这个较少的CSS代码？

Question

我现在有这样的代码：

input[type=text] { 
    background:transparent top center no-repeat; 
    height:30px; 
    font-size:13px; 
    color:@greyBlue; 
    padding:0 10px; 
    border:none; 
    &.long { 
     background-image:url("/img/input_long.png"); 
     width:214px; 
    } 
    &.medium { 
     background-image:url("/img/input_medium.png"); 
     width:96px; 
    } 
    &.short { 
     background-image:url("/img/input_short.png"); 
     width:55px; 
    } 
} 

你知道，如果我可以简化只需更改与变量的文件名部分？ 事情是这样的：

input[type=text] { 
    @input = ""; 
    background-image:url("/img/input_@{input}.png"); 

    &.long { 
     @input = "long"; 
    } 
} 

如果当然，这并不工作，但如果您对functionnal方式的任何想法...非常感谢！

Answer 1

创建一个混合

.bgImg(@input) { 
    background-image:url("/img/input_@{input}.png"); 
} 

，并相应地称之为：

&.long { 
    .bgImg("long"); 
}