#css #math #less #trigonometry
#css #математика #Меньше #тригонометрия
Вопрос:
Пытаюсь преобразовать следующий php-метод для использования в таблице стилей .less:
<?php
$deg2radians = pi() * 2 / 360;
$rad = $degree * $deg2radians;
$costheta = cos($rad);
$sintheta = sin($rad);
?>
В Less, как я мог бы реализовать метод sine / cosine без использования функций 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...
}
Комментарии:
1. в качестве примечания было бы идеально не использовать какие-либо математические методы синуса / косинуса, зависящие от конкретного языка, для решения этой проблемы. Если это можно сделать с помощью базовой математики, это заставило бы его работать в отдельных реализациях, таких как dotless (asp.net ), lessjs (JavaScript) и т.д…
2. Синус и косинус являются трансцендентными функциями. Хотя они могут быть определены с помощью степенных рядов, точной формулы в терминах конечного числа арифметических операций не существует, но приближения любой желаемой точности могут быть определены с помощью арифметики. Это определенно что-то вроде «изобретения колеса», но если вам интересно, я дам вам несколько советов о том, как это сделать.
3. @hardmath Я нахожу ваше имя несколько забавным в этой ситуации.
Ответ №1:
Ну, это не совсем независимо от языка, но поскольку это просто Javascript, он должен работать во всех реализациях LESS, если только я не думаю об этом ясно.
При этом вы можете использовать Javascript для вычисления синуса и косинуса:
.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...
}
Обратные ссылки используются для оценки Javascript, и вы также можете получить доступ к DOM. Например, вполне допустимо следующее:
`document.write('Hello!')`
Тильда используется для экранирования, а @{} обозначает интерполяцию переменной. Например:
@input: 10;
`document.write(Math.sin(@{input}))`;
Ознакомьтесь с руководством по использованию LESS для получения дополнительной информации.
Комментарии:
1. ах, видите ли, мне было интересно, была ли вся Less написана на JavaScript, или это была просто less.js это была версия less для JavaScript. Я протестирую это в dotless (asp.net это реализация less) прямо сейчас
2. ах, так получается, что синтаксис escape отличается в less.js @var: #f00; prop: e(%(«материал здесь %d»), @var); это prop: «материал здесь #f00»; но во всех других реализациях это ~foobar@{var};
3. @tester Синтаксис, который вы указали для less.js однако, похоже, Javascript не интерполирует. Я попытаюсь протестировать это позже, если у меня будет время, но, похоже, руководство по использованию на их веб-сайте устарело.
4. вот пример различий между объединением строк / переменных в lessjs по сравнению с dotless (или менее стандартным): github.com/dancrew32/lesslib/blob/master/mixins.less#L69-72 . =/
5. (только что заметил, что вы обновили ответ) ах, так вот как / когда реализовать @{varName}. Спасибо, что прояснили эту часть.
Ответ №2:
Обратные тики, похоже, не работают в dotless. На выходе вы получите «[скрипт не поддерживается]». Способ, которым я пришел к решению проблемы cos / sin в dotless, заключался в реализации расширений функций. Вы можете увидеть пример расширения функции здесь: https://groups.google.com/forum/?fromgroups =#!topic/без точек/3fVydO8mTHw. У Ваутера Боевинка возник вопрос с настройкой этого в Asp.Net , на который он сам отвечает далее в обсуждении. Также посмотрите на реализацию для dotless.Core.Parser.Функции.Absфункция, чтобы увидеть, как реализовать простую числовую функцию.