How to calculate sine, cosine in Less?

Question

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

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

In Less, how I might one implement a sine/cosine method without using language-specific cos()/sin() functions?

.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, it is not quite language-independent, but since it is just Javascript it should work in all the LESS implementations, unless I'm not thinking about this clearly.

That being said, you can use Javascript to calculate 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...
}

The backticks are used to evaluate Javascript, and you can actually access the DOM as well. For example, the following is perfectly allowed:

`document.write('Hello!')`

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

@input: 10;

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

Check out the LESS usage guide for more info.