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

npm install --save sass-trigonometry

Using yarn

yarn add sass-trigonometry

Usage

@import "~sass-trigonometry";

Constant

`pi`

Example:

$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

sin(45deg); // => 0.7071...
cos(30deg); // => 0.8660...
tan(60deg); // => 1.7320...

`asin` , `acos` and `atan`.

Arcsine, Arccosine and Arctangent inverted trigonometry functions.

Example

asin(0.7071); // => 45
acos(0.8660); // => 30
atan(1.7320); // => 60

`pow`, `fact` and `sqrt`

Power, Factorial and Square-root functions

Example

pow(10, 2); // => 100
fact(5); // => 120
sqrt(100); // => 10

Examples

@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

gbprod / sass-trigonometry Goto Github PK