How to use Less variables in CSS

Question

Ok, so I am not new to using Bootstrap, but I am new to customizing it and using the LESS variables. I am trying to do the simplest of things just to check to see if the LESS variables are even working.

I am trying to set the body's background-color to @brand-success just to test it. It is not working. Chrome tells me that it is an invalid property value.

I know that I've used LESS variables from Bootstrap in jQuery before, but I thought that the CSS file worked in the same way.

I'm not sure if it makes any difference but I am using the bootstrap.css file locally instead of linking it from an external sever like I do the jQuery files.

I don't know if this is a duplicate question or not. I tried my best to search for the answer but the questions were all seemingly different than mine.

Answer 1

Less is a CSS pre-processor . You can use pure CSS in Less, so CSS is less, but the opposite is not true. Chrome has no idea what Less is. It only interprets CSS. @brand-sucess is not valid CSS.

It may have worked in PHP because probably your PHP application previously ran a less pre-processor before sending the CSS file to the client.

It may have worked in JQuery if you are using a client-side Less pre-processor. In this case, you can send LESS directly to the client, but first it must be transformed into a real CSS color (ex: #58fe23) before Chrome can do anything with it.