【sass】实现三角函数

最新推荐文章于 2024-10-19 12:15:33 发布

natsuyu

最新推荐文章于 2024-10-19 12:15:33 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/natsuyu/article/details/52191181

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了Sass和SCSS的区别，强调了Sass在图形绘制时缺少三角函数的问题。作者通过泰勒展开式手动实现了三角函数计算，并介绍了处理阶乘、幂次和角度转换的过程，以及使用牛顿迭代法计算平方根的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要说sass和scss的区别。sass之前是缩进的语法，有点像python和jade那样，写起来有点不方便，所以后来兼容了css的写法，就变成了scss。

sass支持函数，循环，each，mixin这样，还有四则运算。有了for就可以完成很多形状的绘制了，但是木有三角函数很不方便的说= =。

主要参考自：http://jimyuan.github.io/blog/2015/02/12/trigonometry-in-sass.html

这是泰勒展开式 …（数学，真有趣…）

所以可以根据展开式来计算相对的值，由于精度的要求不是太大，所以n取10这样就好了。中间还要处理下阶乘函数和pow函数。

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

@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;
}

如果指数大一点，可以考虑用快速幂来算。

然后对于sin，cos函数传入的参数是deg，需要转成那啥的数（deg / 360 * π）。。

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);

  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}
@function pi() {
  @return 3.14159265359;
}

然后就是三角函数了：

@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;
}

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

@function tan($angle) {
  @return sin($angle) / cos($angle);
}

然后还有开根号的函数，需要用，所以也写了。是使用牛顿迭代法算的- -

@function fabs($x) {
	@if $x > 0 {
		@return $x;
	}
	@else {
		@return $x * -1;
	}
}
@function sqrt($x) {
    $ans: $x;
    $del: 0.00001;
    $pre: 0;
    @while fabs($ans - $pre) >= $del {
        $pre: $ans;
        $ans: ($ans + $x / $ans) / 2;
    }
    @return $ans; 
}