How do I use LESS variables in CSS comments?

css, html, less

Solution

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.

Problem

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?

Original source