Less.js Not Responding in Chrome

Less.js functionality in Firefox while remaining unresponsive in Chrome has raised concerns. To determine the cause, let's examine the provided code:

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

The code seems to implement Less.js with valid CSS preprocessor syntax. However, the culprit lies in the environment and settings used. According to the provided documentation:

Less.js Browser Script Limitations in Chrome

"Less.js browser script currently won't work if you're using Chrome and the path to your page starts with “file:///…”. This is due to a known Chrome issue."

This implies that Less.js may not work in Chrome when using local files rather than a web server.

Solution

To resolve the issue, try the following:

• Serve files using a web server: Upload your files to a web server and access them using a URL (e.g., http://example.com/style.less).
• Use a localhost setup: Run a local development server (e.g., PHP's built-in server, Python's SimpleHTTPServer) and access your files through an address like http://localhost:8000/style.less.
• Consider alternatives: Use a Less.js processing tool such as grunt or gulp to compile Less files during development, ensuring their compatibility with Chrome.