Text Stroke SCSS

_util.scss

@function pi() {
  @return 3.14159265359;
}

@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 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);
  @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);
  @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);
}

// This function is flexible in that you can use it in conjunction with your other text-shadows (see usage).
//
// param
//   $width of the stroke
//   $color of the stroke
//   $reps use more reps to get smoother edges for larger text (slower to render)
// usage
//   @import 'util';
//   text-shadow: stroke(4,#000,12), 5px 5px 15px rgba(0, 0, 0, 0.5);
@function stroke($width, $color, $reps) {
	$width: $width + 0;
	$shadow: 0 0 0 transparent;
	$angle: 0;
	
	@while ($angle < 2*pi()) {
		$x: cos($angle)*$width;
		$y: sin($angle)*$width;
    $shadow: #{$shadow}, #{$x}px #{$y}px 0px $color;
		$angle: $angle+2*pi()/$reps;
	}
	
	@return $shadow;
}