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?
Because less is a great tool to compile css in a programming way and css variable has the feature of dynamtic value and is a good way to switch theme. It's true that is less can't use css variables in less function.
There are two ways to use LESS. You can create a LESS file and convert it on-demand using a Javascript file, or you can pre-compile it and use the resulting CSS file in your theme.
Defining a variable: Variables in Less are represented with an at (@) sign. We can assign a value using a colon (:).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With