CODEWITHSUNDEEP
cssless
bobsilon
bobsilon

Reputation: 1668

why less.js can't compute the color variables, but it computed when compile the less file to css?

i use variables in less file like this:

@base-color: #8156A3;
@base-color-darker: (@base-color - #111);

#searchForm{
   border: 1px solid @base-color-darker;
}

when i compile the less file to a css file, variables work correctly, but when i use the less file as page style sheet, the variables does not affect in elements.

this is how i link the less.js and the less style sheet:

<script src="assets/js/less.min.js"></script>
<link rel="stylesheet" href="assets/less/main.less" />

what's could be the wrong?

Upvotes: 0

Views: 216

Answers (3)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146588

From Client-side usage:

Link your .less stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

But your code is:

<link rel="stylesheet" href="assets/less/main.less" />
           ^^^^^^^^^^

And:

Make sure you include your stylesheets before the script.

... but you have it the other way round:

<script src="assets/js/less.min.js"></script>
<link rel="stylesheet" href="assets/less/main.less" />

To sum up: don't guess :)

Upvotes: 2

pjumble
pjumble

Reputation: 16960

For less.js to correctly parse the stylesheet you need to set the rel attribute to stylesheet/less when including the less file:

<link rel="stylesheet/less" href="assets/less/main.less" />

You also need to include your stylesheet before less.js.

Upvotes: 3

Caelea
Caelea

Reputation: 2348

Browsers don't know about .less extensions. You need to give them only the compiled css.

LESS and SASS were made to help you code faster, not as a replacement of CSS.

Upvotes: 1

Related Questions