Less doesn't work on compiled client-side

StackOverflow https://stackoverflow.com/questions/23531933

  •  17-07-2023
  •  | 
  •  

Question

I have a very simple html file in which I am using less to preprocess css. For this test, I have used standalone html file and latest firefox browser.

HTML file is as below:

<head>
    <link rel="stylesheet/less" type="text/css" href="category.less" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head>

<body>
    <div class="text">Hello there!!</div>
</body>

My category.less file is as below:

.setColor(){
  @colorx:"yellow";
}
.text{
    .setColor();
    color: @colorx;
    font-size:20px;
}

I have developed this example on the basis of this example from less documentation.

My problem is when I run the file, color css property is not applied at all.

In Firebug, it looks like this:

.text {
    font-size: 20px;
}

However, when I parse same less code through online less preprocessors, I do get desired output. I have tried this compiler , this compiler and this compiler.

Worth noting that this compiler gave same output as my code (without color property).

Was it helpful?

Solution

I think the differences in output you're seeing are due to these compilers using different versions of the LESS spec. Previous versions current versions of LESS (thanks @seven-phases-max) allow variables created in mixins to be used throughout the whole document ('global scope').

You've created the @colorx variable inside of a mixin. To make your code work in a compiler using version 1.4.x, you either need to set your @colorx variable outside the mixin, so it has global scope, or apply the colour to .text by using the mixin.

Here's an example demonstrating variable scope LESS in a compiler (currently) running an older compiler So I guess you have a couple of options.

Option one, keeping using the old compiler and change your mixin to this:

.setColor(){
    @colorx:"yellow";
    color: @colorx;
}

.text {
    .steColor();
    font-size:20px;
}

Or, drop set colour all together, and declare the @colorx:"yellow"; variable in the body of your less file.

Or lastly, as @seven-phases-max has pointed out, your code works in the current versions of the compiler, so you could switch to a more up-to-date compiler and use your code as-is.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top