Cannot calculate with variables - SyntaxError: Operating on an unrecognized type

Below are the LESS variables that I am working with: 

@dashboard-height: 90.5%;
@dashlet-header-height: 35px;
@dashboard-margin: 0px;
@dashlet-border: 1px;

I am trying to generate the following classes: 

.generate-dashlet-classes(6);
.generate-dashlet-classes(@n, @i: 1) when (@i =< @n) {
  &.dashlet-@{i} .dashlet-content {
    height: round((calc(@dashboard-height - (@i * (@dashlet-header-height + @dashboard-margin + @dashlet-border)))) / @i, 6);
  }
  .generate-dashlet-classes-times(@i);
  .generate-dashlet-classes(@n, (@i + 1));
}

.generate-dashlet-classes-times(@i, @times:1) when (@times < @i) {
  &.dashlet-@{times}-x-@{i} .dashlet-content {
    @dashletContainerHeight: (@dashlet-header-height + @dashboard-margin + @dashlet-border);
    height: round(((calc(@dashboard-height - (@i * @dashletContainerHeight))) / @i * @times) + (@dashletContainerHeight * (@times - 1)), 6);
  }
  .generate-dashlet-classes-times(@i, (@times + 1));
}

An error is now being thrown by the compiler: 

>> SyntaxError: Operation on an invalid type in app/styles/less/main.less on line 338, column 5:
>> 337 
>> 338     .generate-dashlet-classes(6);
>> 339     .generate-dashlet-classes(@n, @i: 1) when (@i =< @n) {

If @dashboard-height had a px value and calc() was not used, there would be no error. However, when mixing percentages and px values, we must use calc(), correct?

cssless

Answer №1

When using LESS, it will attempt to calculate any non-escaped values until you compile with strict math enabled. For example, consider the calculation of 

(90.5% - (3 * (35px + 0px + 1px))) / 3
. Since Less cannot determine the outcome, an error message like "Operation on an invalid type" may appear.

To resolve this issue, you can enable strict math mode by running 

lessc -sm=on myfile.less myfile.css
. However, be aware that enabling this mode may prevent other calculations in your LESS files from being processed unless they are enclosed in unnecessary parentheses. This could require restructuring your code base.

A technique for escaping involves using syntax such as width: ~"calc(100% - 20px)";, which allows variables inside the calc function to remain unescaped. Alternatively, you can interpolate variables to avoid escaping issues:

height: ~"calc(@{dashboard-height} - (@{i} * (@{dashlet-header-height} + @{dashboard-margin} + @{dashlet-border})))" / @i;

resulting in something like 
height: calc(90.5% - (2 * (35px + 0px + 1px))) / 2
. Although this approach prevents compilation errors, the resulting CSS may be invalid.

If selective escaping is preferred, only certain operators like the minus sign can be escaped:

height: calc(@dashboard-height ~"-" (@i * (@dashlet-header-height + @dashboard-margin + @dashlet-border)));
which yields height: calc(90.5% - 36px);

After addressing escaping issues, the next obstacle may involve improper use of the LESS round function. This function requires a floating point number argument and should not be mixed with the CSS calc() function. Rounding should ideally be done when the value is known at compile time. Additionally, dividing calc() by a number is not supported.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Fixed Footer with CSS

Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help ...

css

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Setting a background-image using jQuery in Codeigniter can be done by following these steps

Currently, I am developing a project in Codeigniter. In my jQuery file, I have included code to set the background image of the body element: $('body').css('background-image','url(<?php echo base_url("assets/images/bg2.png");?& ...

phpjquerycsscodeigniter

Having difficulty adjusting the height of a div element identified by its class

I am developing an iOS app that involves opening a URL in a UIWebView. My goal is to change the position of the top of a div with the class "main-container scrollable". As I am not well-versed in jQuery, I'm facing some challenges. Here is an excerpt ...

jqueryioscssswiftuiwebview

Choose a node from descendants based on its attribute

I am working with an interface that switches between displaying different div elements. Each div element has their children arranged differently, and when the switch happens, I need to access a specific child node of the newly displayed div. However, I fin ...

javascripthtmlcss

Omitting items from the duplicated text on Safari

I am looking for a way to allow users to copy and paste a block of text without including inline controls, such as buttons. In Chrome, adding user-select: none; to the controls achieves this. When the user selects the entire paragraph, the buttons are not ...

htmlcsssafaritextselection

Padding in submit button value is essential for ensuring proper spacing and

Is there a way to adjust the padding of a submit button value? I have tried using text-align: right;, which works fine for aligning the text to the right. However, when I attempt to use padding-left: 25px;, the text remains centered instead of moving to t ...

css

Utilizing style binding to define SCSS variables

I am currently working on a Vue component and I want to style it dynamically using properties that are passed into it. My goal is to adjust my global SCSS variables based on a color passed in as a property to the component. Although I have created a simp ...

cssvue.jssassvuejs2

Are THREE.js CSS2D Text Labels able to be detected and distinguished by RayCasting?

Currently, I am in the process of creating a diagramming tool using THREE.js. To add text labels to my diagrams, I have been utilizing the CSS2D feature provided by THREE.js, which allows for text that is both rotatable and MathJax-friendly. For regular m ...

cssthree.jsraycasting

Tips for creating a full-width fixed header

I've implemented a fixed header in a bootstrap container and I'm attempting to make the header fill 100% of the width without any margins or paddings. Here's a snippet of the HTML structure: <div class="container-fluid"> <div c ...

htmlcssbootstrap-4

Problem with CSS/SASS dropdown navigation bar

Having trouble with a design issue, I have successfully recreated the Twitter navigation bar and now I want a dropdown menu to appear when hovering over the 'settings' text. However, I'm facing difficulties as the overflow is hidden in the n ...

csssass

What is the best way to make the block rotate each time the button is clicked?

Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...

htmlcsssvg

Constructing a horizontal slider using vertically floating divs

Struggling to create a basic horizontal image slider using overflow:hidden and floating divs. Despite efforts, the divs keep stacking vertically instead of horizontally. Numerous online examples have been attempted without success. HTML: <div id="slid ...

htmlcssclearfix

Angular: dynamically updating scope when hovering over an element

Is there a way to have a child div of a main div hidden by default, only becoming visible when you hover over the main div? I'm looking for a solution using Angular and avoiding the jQuery .hover() method. My idea is to use ng-show on the child div ...

cssangularjs

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

Create a CSS border with a stylish downward arrow design

Recently, I came across a specific requirement that I need help with. You can see the image https://i.sstatic.net/j4Qdf.png. I found a helpful resource on how to create triangles using CSS on https://css-tricks.com/snippets/css/css-triangle/. However, I a ...

css

Transforming a static grid into a dynamic responsive grid

I've successfully set up a fixed grid that you can view here: http://jsfiddle.net/challenger/UxzCa/1. The project has two key requirements: Photos should be adjusted to perfectly fit within a square card div (even if width and height vary); The car ...

javascriptjquerycssgridresponsive-design

Keyboard-controlled Table Scrolling

I have a table with 40 rows, displayed in a div that shows 18 rows and hides the rest using overflow-x:scroll. I've written a JavaScript code to enable row selection and navigation using the 'up' and 'down' arrow keys on the keybo ...

javascriptjqueryhtmlcss

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

I have a layout with 4 columns of images that I want to scale on mouse hover using the 'column-count' property. The first column works correctly, but the next three end up positioned under the upper border during the transformation. I've e ...

htmlcss

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

I have encountered an unusual issue in my Angular 13 + Bootstrap 5 application. When accessing a scrollable page on small screen devices, the scrolling function does not work properly and causes the page to flicker. I observed that this problem does not o ...

htmlcssangulartwitter-bootstrap