css - Sass 中的三 Angular 函数——预处理器错误

Question

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

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

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

但是，当我的 Sass 正在编译时，出现以下错误:

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

很高兴我遗漏了一些基本的东西，可能非常简单和语法。不幸的是，虽然我看了一堆在 Sass 中使用三 Angular 函数的示例，但我无法发现我的代码与示例中的代码之间的区别。

Answer 1

以下解决方案摘自 Trigonometry In Sass 作者:Daniel Perez Alvarez。

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