Why Doesn\'t My LESS.js Code Work in Chrome?

LESS.js Compatibility Issue in Chrome

You've encountered a situation where LESS.js appears to be functional in Firefox but not in Chrome. To determine the underlying cause, let's examine your provided code:

<code class="html"><link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@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%;
}</code>

The code appears syntactically correct, but let's address your observation that html { background: red; } doesn't take effect in Chrome either.

The explanation lies in a known issue with Chrome. According to the LESS.js documentation, the browser script will not work if the path to your page starts with "file:///" due to a Chrome-specific limitation.

To resolve this issue, consider using a web server to host your page instead of opening it directly from a local file. Alternatively, you can explore using a pre-built LESS CSS file instead of relying on the browser script.

The above is the detailed content of Why Doesn\'t My LESS.js Code Work in Chrome?. For more information, please follow other related articles on the PHP Chinese website!