作者:手机用户2602923361 | 来源:互联网 | 2023-08-22 20:42
首先要说sass和scss的区别。sass之前是缩进的语法,有点像python和jade那样,写起来有点不方便,所以后来兼容了css的写法,就变成了scss。sass支持函数,循环,each,mixi
首先要说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;
}