如何简化这个较少的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";
    }
}

如果当然这不起作用，但如果您对功能方式有任何想法......非常感谢！

Answer 1

创建一个mixin

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

并相应地调用它：

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