How to calculate sine, cosine in less?

Question

Trying to convert the following php method for use in the .less stylesheet:

<?php $deg2radians = pi() * 2 / 360; $rad = $degree * $deg2radians; $costheta = cos($rad); $sintheta = sin($rad); ?> 

In Less, how can I implement the sine / cosine method without using the language functions cos () / sin ()?

 .rotate(@deg) { // css transform capable browsers properties... // IE <= 8 @deg2radians: 3.1416 * 2 / 360; @rad: @degree * @deg2radians; @sintheta: sin(@rad); // How to sin()? @costheta: cos(@rad); // How to cos()? // filter: transform matrix method... } 

Answer 1

Well, that’s not entirely independent of the language, but since it’s just Javascript, it should work in all LESS implementations, unless I think about it clearly.

In doing so, you can use Javascript to calculate the sine and cosine:

 .rotate(@deg) { // css transform capable browsers properties... // IE <= 8 @deg2radians: 3.1416 * 2 / 360; @rad: @degree * @deg2radians; @sintheta: ~`Math.sin(@{rad})`; @costheta: ~`Math.cos(@{rad})`; // filter: transform matrix method... } 

Backticks are used to evaluate Javascript, and you can also access the DOM. For example, the following is valid:

 `document.write('Hello!')` 

The tilde is used for escaping, and @ {} means variable interpolation. For example:

 @input: 10; `document.write(Math.sin(@{input}))`; 

See the LESS Usage Guide for more information.

Answer 2

Back-ticks don't seem to work unceremoniously. You will get "[script unsupported]" in the output. The way I came up with a solution to the cos / sin problem in an unceremonious way was to implement feature extensions. Here you can see an example of a function extension: https://groups.google.com/forum/?fromgroups=#!topic/dotless/3fVydO8mTHw . Wouter Boevink had a question about setting this up in Asp.Net, which he himself answers later in the discussion. Also look at the implementation for dotless.Core.Parser.Functions.AbsFunction to see how to implement a simple numeric function.