LESS css variable not working

Question

I am new to LESS and I'm using less.js as to my development environment. The problem is, when I declare a variable, it doest not working like nothing happen.

@bground: #c0c9c8;
body{
    background-color: @bground;
}

As you can see, the @bground does not pass it value. If I put direct value it will apear which is proof the .less is set up correctly. I'm using latest version of Chrome and running locally on Mac. Everything is working except variable. Without variables in work, I cannot use the LESS feature.

Just to make sure, do you first include the CSS <link rel="stylesheet/less" type="text/css" href="styles.less"> and then the javascript <script src="less.js" type="text/javascript"></script>on the page in question? — Henrik Ammer
– Henrik Ammer, Commented Sep 4, 2012 at 19:13
@HenrikAmmer Yes I did. The stylesheet first and the Less.js after that. — Firdaus Adib
– Firdaus Adib, Commented Sep 4, 2012 at 19:35
Do you use the console in Chrome and/or Firebug in Firefox? If so, do you see any errors in the console regarding if something went wrong? — Henrik Ammer
– Henrik Ammer, Commented Sep 4, 2012 at 19:38
There are an error : Resource interpreted as Stylesheet but transferred with MIME type text/plain: "file://localhost/Users/Firdaus/Documents/WebProject/HackerHiresV2/less/main.less". — Firdaus Adib
– Firdaus Adib, Commented Sep 4, 2012 at 19:49

Evandro Silva · Accepted Answer · 2012-09-04 20:00:33Z

2

If you`re using apache, create an .htaccess file in your root folder, if you already have one, just add this line:

AddType text/css .less

This will tell apache to send the right content-type header for the .less file

edited Sep 4, 2012 at 20:00

answered Sep 4, 2012 at 19:34

Evandro Silva

1,3921 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Firdaus Adib Over a year ago

This is the error I found : <img src="i.invoture.com/thumbs/screenshot.png">

Firdaus Adib Over a year ago

It is solved. Before this, I'm using direct file:// but there are no error in my console. So what I did is I tested on server by upload it in live server and it works like a charm. So the LESS.js need to work with XMLHttpRequest which is direct file:// dont have. Now I'm using MAMP and I marked this as solved. Thank you gentleman!

Alessio · Accepted Answer · 2020-10-22 07:29:27Z

0

Please make sure you loaded less js file in your page to accommodate less file.

use

<script src="//cdn.jsdelivr.net/npm/less" ></script>

for that.

Also while loading your less file use following syntax

<link rel="stylesheet/less" type="text/css" href="dist/css/<your less file>.less" />

make sure you use rel and type attributes on the tag, as mentioned.

edited Oct 22, 2020 at 7:29

Alessio

3,69620 gold badges42 silver badges52 bronze badges

answered Oct 22, 2020 at 6:58

Jijo thomas

11 bronze badge

Collectives™ on Stack Overflow

LESS css variable not working

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related