开发者

How to calculate sine, cosine in Less?

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开发者_C百科 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...
}


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.


Back-ticks do not seem to be working in dotless. You will get "[script unsupported]" in the output. The way I came up with solving the cos/sin problem in dotless was to implement function extensions. You can see an example of a function extension here: https://groups.google.com/forum/?fromgroups=#!topic/dotless/3fVydO8mTHw. Wouter Boevink had a question with configuring this in Asp.Net, which he himself answers further down in the discussion. Also look at the implementation for dotless.Core.Parser.Functions.AbsFunction to see how to implement a simple numeric function.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜