Question

Is it possible to use LESS variables in CSS comments for mixins? I need that for spriting.

For example (not working / only the image path gets replaced):

.sprite (@width) {
    /** sprite: sprite-@{width}; sprite-image: url('../img/@{width}/sprite-@{width}.png'); sprite-layout: vertical */

    .picture {
        background-image: url('../img/@{width}/picture.png'); /** sprite-ref: sprite-@{width}; */
    }
}

.sprite(800);

Bonus question: Can I prevent the linebreak between background-image and the sprite-comment after compiling with lessc?

Answer 1

no, you can’t do variables in comments.

what about adding a property ‘comment’ ignored by browsers.

you could try to use an escaped string e.g.

prop: ~"url('blah'); /* comment */";

but it produces 2 semicolons (valid CSS) and is pretty hacky.