LESS variables problem

[Kuzyo]

I new to LESS, first using it, but from the start have problem.

I can apply variables at all, here is photo with background-color http://i1367.photobucket.com/albums/r799/Yaroslav_Kuzyo/1_zps9e9436e1.jpg, as you can see Chrome cross background-colour, but if I use #HEX it works. Thanks for the help

[Paulie_D]

images aren’t going to be enough.

Could you make a reduced case in Codepen?

[Paulie_D]

Never mind…it works for me in Codepen: http://codepen.io/Paulie-D/pen/xnjyo

Under what circumstances does it not work?

I assume you are using a pre-processor app?

[Kuzyo]

Found help on Stock Overflow.

instead of

link rel="stylesheet" href="styles.less"

I have to link in this way

link rel="stylesheet/less" href="styles.less"

[Paulie_D]

I’m not entirely sure that’s true although I have little knowledge of LESS.

LESS is a shorthand way of writing CSS, you would always need to link to a CSS file in your `head`.

Whatever processor you are using will take your `styles.less` file and create a separate `styles.css` file.

Or do I have that wrong?

[jimmy]

You probably didn’t compile it.

Did you include less.js in the head tag?

Yes, indeed, you need to specify the rel to be “stylesheet/less”, but you still need to include the .js preprocessor to compile the file and output it as a proper css syntax.

[Kuzyo]

@jimmyniceguy, you are right it’s my **head**

[Kitty Giraudel]

JavaScript can compile LESS stylesheets on the fly but you shouldn’t ever do that. It’s terrible.

[jimmy]

Still it’s possible and the only solution if you do not compile it manually. I hinted it, because the OP tried to include it as .less only.

[Kitty Giraudel]

http://alphapixels.com/prepros/ seems to do the job pretty well.

[jimmy]

Yes, of course – I just explained what he did wrong from the head markup POV.

[Author]

Posts