Sass 中的三角函数——预处理器错误答案

【问题标题】：Trigonometric functions in Sass -- preprocessor errorSass 中的三角函数——预处理器错误
【发布时间】：2014-11-17 09:52:45
【问题描述】：

不幸的是，我想我误解了如何在 Sass 中使用三角函数。我已经进行了大量的谷歌搜索，但结果有限。

为了使 HTML 元素的过渡动画化，我在我的一个 scss 文件中有类似于以下的代码：

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

但是，当我的 Sass 正在编译时，我收到以下错误：

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

我很喜欢我遗漏了一些基本的东西，可能很简单，句法。不幸的是，我查看了一堆在 Sass 中使用三角函数的示例，但我无法发现我的代码与示例中的代码之间的区别。

【问题讨论】：

标签： css sass compiler-errors trigonometry

【解决方案1】：

以下解决方案摘自 Daniel Perez Alvarez 的 Trigonometry In Sass。

/* 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));
 }

【讨论】：

【解决方案2】：

对于将来对此感到困惑的任何人，Sass 本身截至 2014 年 11 月 17 日不支持三角函数。相反，需要Compass 框架才能使用它们。（有关安装指南针的分步说明，请参阅此article。）

【讨论】：

【解决方案3】：

或者只是

$sin45deg: .7071;

然后将sin(45deg) 替换为$sin45deg。 Tada，不需要框架。

【讨论】：