https://github.com/gbprod/sass-trigonometry
Sass trigonometry and inverse trigonometry functions
https://github.com/gbprod/sass-trigonometry
css sass trigonometry
Last synced: about 1 year ago
JSON representation
Sass trigonometry and inverse trigonometry functions
- Host: GitHub
- URL: https://github.com/gbprod/sass-trigonometry
- Owner: gbprod
- License: wtfpl
- Created: 2019-12-23T08:00:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-11T04:47:01.000Z (over 2 years ago)
- Last Synced: 2025-04-25T03:46:53.030Z (about 1 year ago)
- Topics: css, sass, trigonometry
- Language: SCSS
- Size: 391 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sass-trigonometry
[](https://travis-ci.org/gbprod/sass-trigonometry)
[](http://www.wtfpl.net/)
[](https://www.npmjs.com/package/sass-trigonometry)
Sass trigonometry and inverse trigonometry functions.
## Introduction
Expand Sass function with pure Sass trigonometry functions : `pi` , `deg-to-rad`, `rad-to-deg` , `sin` , `cos` , `tan` , `asin` , `acos` and `atan`.
And with some usefull math functions : `pow`, `fact` and `sqrt`.
It could allows to dynamicly calculate angle in pure sass.
## Install
Using npm
```bash
npm install --save sass-trigonometry
```
Using yarn
```bash
yarn add sass-trigonometry
```
## Usage
```scss
@import "~sass-trigonometry";
```
## Constant
### `pi`
_Example:_
```scss
$pio2: pi() / 2;
```
## Functions
### `deg-to-rad` and `rad-to-deg`
Simple degres to radian conversion functions.
### `sin` , `cos` and `tan`
Sine, Cosine and Tangent trigonometry functions.
_Example_
```scss
sin(45deg); // => 0.7071...
cos(30deg); // => 0.8660...
tan(60deg); // => 1.7320...
```
### `asin` , `acos` and `atan`.
Arcsine, Arccosine and Arctangent inverted trigonometry functions.
_Example_
```scss
asin(0.7071); // => 45
acos(0.8660); // => 30
atan(1.7320); // => 60
```
### `pow`, `fact` and `sqrt`
Power, Factorial and Square-root functions
_Example_
```scss
pow(10, 2); // => 100
fact(5); // => 120
sqrt(100); // => 10
```
## Examples
```scss
@import "~sass-trigonometry";
$width: 200;
$height: 150;
$diagonal-width: sqrt(pow($width, 2) + pow($height, 2));
$diagonal-angle: atan($height / $width);
#triangle {
position: relative;
height: #{$height}px;
width: #{$width}px;
border-bottom: 1px solid red;
border-left: 1px solid red;
&:before {
border-top: 1px solid red;
content: "";
left: 0;
position: absolute;
top: $height;
transform-origin: left;
transform: rotate(#{$diagonal-angle}deg);
width: #{$diagonal-width}px;
}
}
```
[See the result in Codepen](https://codepen.io/gbprod/pen/ZEYyzJM)
## References
* https://github.com/drewsynan/trig.sass/blob/master/trig.scss
* https://blog.smarchal.com/sass-et-la-trigonometrie
* https://web.archive.org/web/20131001093543/http://japborst.net/blog/sass-sines-and-cosines.html
* https://codepen.io/thebabydino/pen/rvwuF
* http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
* https://gist.github.com/kamikat/c4d472ce3c61feec6376