Use 2 Css LESS variables and subtract one from the other

Question

In less, I have the following:

@divwidth: 425px;
@docwidth: '$(window).width()';

I'd like to set the left style to the result of this:

left: ((@docwidth - @divwidth + 1)/2)!important;

I'm using the +1 in case I get a 0 and try to divide it by 2

I can't seem to get a proper value nor find out if I'm doing it right. I've tried

left: ~'((docwidth - divwidth + 1) / 2)px' !important;
left: ~'calc((docwidth - divwidth + 1) / 2)px' !important;

Still no joy. I'd appreciate some help or a good resource to figure this out...

Answer 1

Yes you can use JavaScript evaluating in your Less code. JavaScript code should be placed between backticks @docwidth: "`$(window).width()`"; , see also https://stackoverflow.com/a/19386571/1596547 for an example.

The usage of JavaScript in Less has been deprecated, because alternative compilers (not written in JavaScript) can not compile your code.

Also notice that $(window).width() only makes sense when using the client side compiler and even then you should recompile your code after resizing your window (calling less.refreshStyles()).

In most situations you use less to compile static CSS code. Static CSS code does not change / respond on environment properties such as $(window).width().