css - How to get division and math function to work on variable map item(s) in less

Question

I'm relatively new to less and I have this less code which I want to compile down to css (the .song block specifically). I'm learning through a course.

Less code:

@breakpoints: {
  desktop: 989px;
  tablet: 767px;
  phone: 480px;
};


@media only screen and (min-width: @breakpoints[desktop]) {

  @minWidth: @breakpoints[desktop];

  .container {
    width: @minWidth;
  }

  /*Division*/
  .song {
    width: @breakpoints[desktop] / 3;
  }
  
  /*With ceil function*/
  .song {
    width: ceil(@breakpoints[desktop] / 3); 
  }
}

When I divide the number, it doesn't give an error but doesn't work as intended.

Instructors css output:

.song {
    width: 329.66666667px;
 }

My own css output:

.song {
    width: 989px / 3;
  }

When I'm using a math function like ceil, it gives an error:

Instructors css output:

.song {
    width: 330px;
 }

My own result (error):

ArgumentError: Error evaluating function ceil: argument must be a number

I have knowledge of javascript so I get what the error means. What I don't understand is how, for the same code I wrote above, the instructor's code compiled fine but mine doesn't. I tried browsing but I haven't gotten any answer that addresses this issue. The instructor used lessc version 3.8.1, I'm using lessc version 4.1.0. Any help will be really appreciated. Thanks.

question from:https://stackoverflow.com/questions/65915806/how-to-get-division-and-math-function-to-work-on-variable-map-items-in-less

Answer 1

I've been able to get the calculation to work by inserting the expressions in parenthesis like so:

Division:

.song {
  width: (@breakpoints[desktop] / 3);
}

Ceil function:

.song {
  width: ceil((@breakpoints[desktop] / 3)); 
}

Got answer at github issue/thread from this particular comment.