How to simplify this less css code?

Question

I currently have this code :

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

Do you know if I can simplify that by just changing the filename part with a variable? Something like this :

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

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

If course this doesn't work, but if you have any idea about a functionnal way... Thanks a lot!

Christoph · Accepted Answer · 2012-08-02 10:00:36Z

1

create a mixin

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

and call it accordingly:

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

edited Aug 2, 2012 at 10:00

answered Aug 2, 2012 at 9:52

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to simplify this less css code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related