Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use LESS variables in CSS comments?

Tags:

html

css

less

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?

like image 338
Riebel Avatar asked Aug 22 '12 16:08

Riebel


People also ask

Can I use CSS variables in LESS?

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.

How many ways can you use LESS in CSS?

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.

How do you represent a variable in LESS?

Defining a variable: Variables in Less are represented with an at (@) sign. We can assign a value using a colon (:).


1 Answers

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.

like image 200
Luke Page Avatar answered Sep 27 '22 23:09

Luke Page