热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【sass】实现三角函数

首先要说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;
}





推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • Go语言中的高效排序与搜索算法解析
    在探讨Go语言中高效的排序与搜索算法时,本文深入分析了Go语言提供的内置排序功能及其优化策略。通过实例代码,详细讲解了如何利用Go语言的标准库实现快速、高效的排序和搜索操作,为开发者提供了实用的编程指导。 ... [详细]
  • 我正在为网站创建自定义光标。当鼠标移动时,我有两个div居中于光标,但是当 ... [详细]
  • 在数据表中,我需要触发一个操作来刷新特定列的数据。例如,对于以下表格:| ID | Name | IsDeleted ||----|-------|-----------|| 1 | test | True || 2 | test2 | False |我希望在点击“更新”按钮时,能够仅刷新选定行的“IsDeleted”列。这将有助于确保数据的实时性和准确性。 ... [详细]
  • 保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg ... [详细]
  • 简介quickly-css是一个快速书写CSS样式的类库,项目采用scss,gulp构建,quickly-css方便了我们日常开发重复书写css的烦恼,它类似于bootstrap但 ... [详细]
  • 我在SCSS中为网格列(12列)提供了一个@for函数。我的SASS功能:@for$ifrom1through12 ... [详细]
  • 【BZOJ3197】[Sdoi2013]assassinDescriptionInputOutputSampleInput412233400111000SampleOutput ... [详细]
  • CSSandSass(SCSS)stylerulesIDandclassnamingID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和 ... [详细]
  • 本文主要分享【】,技术文章【SassScss、Less是什么?】为【CRMEB】投稿,如果你遇到CRMEB,学习笔记相关问题,本文相关知识或能到你。Sass(SyntacticallyAw ... [详细]
  • CSS制作框架Sass 3.4.4有哪些优点
    这篇文章主要讲解了“CSS制作框架Sass3.4.4有哪些优点”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究 ... [详细]
  • 1.什么是预处理器?  CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。 ... [详细]
  • 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
    8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g ... [详细]
  • vue使用Sass时出现报错问题如何解决
    本篇文章为大家展示了vue使用Sass时出现报错问题如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获 ... [详细]
author-avatar
手机用户2602923361
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有