// ----------------------------------------------------------------------------- // This file contains all application-wide Sass functions. // ----------------------------------------------------------------------------- /// Native `url(..)` function wrapper /// @param {String} $base - base URL for the asset /// @param {String} $type - asset type folder (e.g. `fonts/`) /// @param {String} $path - asset path /// @return {Url} @function asset($base, $type, $path) { @return url($base + $type + $path); } /// Returns URL to an image based on its path /// @param {String} $path - image path /// @param {String} $base [$base-url] - base URL /// @return {Url} /// @require $base-url @function image($path, $base: $base-url) { @return asset($base, 'images/', $path); } /// Returns URL to a font based on its path /// @param {String} $path - font path /// @param {String} $base [$base-url] - base URL /// @return {Url} /// @require $base-url @function font($path, $base: $base-url) { @return asset($base, 'fonts/', $path); } // @function get-vw($target) { // $vw-context: (1000*.01) * 1px; // @return ($target/$vw-context) * 1vw; // } /*Box Shadow Converter*/ @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; } @function fact($number) { $value: 1; @if $number > 0 { @for $i from 1 through $number { $value: $value * $i; } } @return $value; } @function pi() { @return 3.14159265359; } @function rad($angle) { $unit: unit($angle); $unitless: $angle / ($angle * 0 + 1); // If the angle has 'deg' as unit, convert to radians. @if $unit == deg { $unitless: $unitless / 180 * pi(); } @return $unitless; } @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 drop-shadow-converter($color: #000, $opacity: 100, $angle: 0, $distance: 0, $spread: 0, $size:0, $is-text-shadow: false) { // calculate angle ∠ $__ang: (180-$angle) * 3.14 / 180; //convert to radians // vertical shadow: offset-y = Sin(∠) * Hypotenuse $__offset-y: round(sin($__ang) * $distance); // horizontal shadow: offset-x = Cos(∠) * Hypotenuse $__offset-x: round(cos($__ang) * $distance); // spread-radius equals the Photoshop Size multiplied by the Photoshop Spread percentage $__spread-rad: $size * $spread/100; // blur-radius is equal to the Photoshop Size minus the $__blur-rad: $size - $__spread-rad; // variable for scope context @if ($is-text-shadow) { @return $__offset-x $__offset-y $__blur-rad $__spread-rad rgba(red($color), green($color), blue($color), $opacity/100); } @else { @return $__offset-x $__offset-y $__blur-rad rgba(red($color), green($color), blue($color), $opacity/100); } }