Тригонометрические функции в Sass - ошибка препроцессора

Question

К сожалению, я не понимаю, как использовать тригонометрические функции в Sass. Я сделал довольно много поиска Google, но с ограниченными результатами.

Для того, чтобы оживить переход на HTML-элемента У меня есть код, подобный следующему в одном из моих SCSS файлов:

#home-positions { 
    transform: translateX(200px * sin(45deg)); 
} 

Когда мой Sass компилирует, однако, я получаю следующее сообщение об ошибке:

Syntax error: Undefined operation: "200px times sin(45deg)". 

Мне очень нравится, что мне не хватает чего-то фундаментального, возможно, довольно простого и синтаксического. К сожалению, я посмотрел на кучу примеров использования тригонометрических функций в Sass, и я не смог определить разницу между моим кодом и примерами.

Большое спасибо, заблаговременно, за любого, кто может это рассказать!

Answer 1

Кому-то, смущенным этим в будущем, Сасс сам по состоянию на 11/17/14 не поддерживает тригонометрические функции. Вместо этого для их использования требуется рамка Compass. (См это article шаг за шагом инструкции по установке компаса.)

Answer 2

/* power */ 
@function pow($number, $exp) { 
    $value: 1; 
    @if $exp > 0 { 
    @for $i from 1 through $exp { 
     $value: $value * $number; 
    } 
    } 
    @else if $exp < 0 { 
    @for $i from 1 through -$exp { 
     $value: $value/$number; 
    } 
    } 
    @return $value; 
} 

/* factorial */ 
@function fact($number) { 
    $value: 1; 
    @if $number > 0 { 
    @for $i from 1 through $number { 
     $value: $value * $i; 
    } 
    } 
    @return $value; 
} 

/* pi */ 
@function pi() { 
    @return 3.1415926535897932384626433832795028841971694; 
} 

/* radian */ 
@function rad($angle) { 
    $unit: unit($angle); 
    $unitless: $angle/($angle * 0 + 1); 
    // If the angle has 'deg' as unit, convert to radians. 
    @if $unit == deg { 
    $unitless: $unitless/180 * pi(); 
    } 
    @return $unitless; 
} 

/* sine */ 
@function sin($angle) { 
    $sin: 0; 
    $angle: rad($angle); 
    // Iterate a bunch of times. 
    @for $i from 0 through 10 { 
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1))/fact(2 * $i + 1); 
    } 
    @return $sin; 
} 

А потом в конце концов

#home-positions { 
    transform: translateX(200px * sin(45deg)); 
} 

Trigonometry In Sass written by Daniel Perez Alvarez.